dkulchenko/v-click-outside

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

v-click-outside

Vue directive to react on clicks outside an element without stopping the event propagation. Great for closing dialogues, menus among other things.

Install

$ npm install --save v-click-outside

$ yarn add v-click-outside

Use

import Vue from 'vue'
import vClickOutside from 'v-click-outside'

Vue.use(vClickOutside)

<script>
  export default {
    methods: {
      onClickOutside (event) {
        console.log('Clicked outside. Event: ', event)
      }
    }
  };
</script>

<template>
  <div v-click-outside="onClickOutside"></div>
</template>

Or use it as a directive

import vClickOutside from 'v-click-outside'

<script>
  export default {
    directives: {
      clickOutside: vClickOutside.directive
    },
    methods: {
      onClickOutside (event) {
        console.log('Clicked outside. Event: ', event)
      }
    }
  };
</script>

<template>
  <div v-click-outside="onClickOutside"></div>
</template>

License

MIT License

Style