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