vue-clickaway

Reusable clickaway directive for reusable Vue.js components

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-clickaway
971262.2.25 years ago7 years agoMinified + gzip package size for vue-clickaway in KB

Readme

vue-clickaway
Reusable clickaway directive for reusable Vue.js components
npm version CDNJS

Overview

Sometimes you need to detect clicks outside of the element (to close a modal window or hide a dropdown select). There is no native event for that, and Vue.js does not cover you either. This is why vue-clickaway exists. Please check out the demo before reading further.

Requirements

  • vue: ^2.0.0
If you need a version for Vue 1, try vue-clickaway@1.0.

Install

From npm: ``` sh $ npm install vue-clickaway --save ``` From CDN, chose the one you prefer: ``` html ```

Usage

  1. Make the directive available to your component
  1. Define a method to be called
  1. Use the directive in the template
The recommended way is to use the mixin: ``` js import { mixin as clickaway } from 'vue-clickaway'; export default { mixins: clickaway , template: '

Click away

', methods: {
away: function() {
console.log('clicked away');
},
}, }; ``` If mixin does not suit your needs, you can use the directive directly: ``` js import { directive as onClickaway } from 'vue-clickaway'; export default { directives: {
onClickaway: onClickaway,
}, template: '

Click away

', methods: {
away: function() {
console.log('clicked away');
},
}, }; ```

Caveats

  1. Pay attention to the letter case. onClickaway turns into v-on-clickaway,
while `onClickAway` turns into `v-on-click-away`.
  1. Prior to vue@^2.0, directive were able to accept statements.
This is no longer the case. If you need to pass arguments, just do
`v-on-clickaway="() => away(arg1)"`.
  1. There is a common issue with dropdowns (and modals) inside an element with
`v-on-clickaway`. Some UI libraries chose to implement these UI elements
by attaching the DOM element directly to the body. This makes clicks on
a dropped element trigger away handler. To combat that, you have to add
an extra check in the handler, for where the event originated from.
See #9 for an example.

License

MIT