v-click-outside-x

v-click-outside-x

Vue V2 directive to react on clicks outside an element.

Install

$ npm install --save v-click-outside-x

$ yarn add v-click-outside-x

Use

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

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 with useCapture option true

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

Or use it as a directive

import vClickOutside from 'v-click-outside-x'

<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>

For support of the PointerEvent API, consider loading the Pointer Events Polyfill.

License

MIT License