vue2-click-outside

1.0.2 • Public • Published

vue2-click-outside

Vue directive to react on clicks outside an element without stopping the event propagation.

Install

$ npm install --save vue2-click-outside
$ yarn add vue2-click-outside

Use

import Vue from 'vue'
import Vue2ClickOutside from 'vue2-click-outside'
 
Vue.use(Vue2ClickOutside)
<script>
  export default {
    data () {
      clickOutsideConfig: {
        handler: this.handler,
        middleware: this.middleware,
        events: ['dblclick', 'click'],
        active: true
      }
    },
    methods: {
      onClickOutside (event, el) {
        console.log('Clicked outside. Event: ', event)
      },
 
      handler (event, el) {
        console.log('Clicked outside (Using config), middleware returned true :)')
      },
      middleware (event, el) {
        return event.target.className !== 'modal'
      }
    }
  };
</script>
 
<template>
  <div v-click-outside="onClickOutside"></div>
  <div v-click-outside="clickOutsideConfig"></div>
</template>

Or use it as a directive

import Vue2ClickOutside from 'vue2-click-outside'
 
<script>
  export default {
    directives: {
      clickOutside: Vue2ClickOutside.directive
    },
    methods: {
      onClickOutside (event) {
        console.log('Clicked outside. Event: ', event)
      }
    }
  };
</script>
 
<template>
  <div v-click-outside="onClickOutside"></div>
</template>

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i vue2-click-outside

Weekly Downloads

6

Version

1.0.2

License

MIT

Unpacked Size

220 kB

Total Files

6

Last publish

Collaborators

  • dimetrix