Install

npm install vue-clickaway2

yarn add vue-clickaway2

vue-clickaway2

Reusable clickaway directive for reusable Vue.js components

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-clickaway2 exists. Please check out
the demo before reading further.

Vue-Clickaway2 is a continuation of Vue-Cickaway.

Requirements

vue: ^2.0.0

If you need a version for Vue 1, try [email protected].

Install

From npm:

 $ npm install vue-clickaway2 --save

Usage

Make the directive available to your component
Define a method to be called
Use the directive in the template

The recommended way is to use the mixin:

 import { mixin as clickaway } from 'vue-clickaway2';

export default {
  mixins: [ clickaway ],
  template: '<p v-on-clickaway="away">Click away</p>',
  methods: {
    away: function() {
      console.log('clicked away');
    },
  },
};

If mixin does not suit your needs, you can use the directive directly:

 import { directive as onClickaway } from 'vue-clickaway2';

export default {
  directives: {
    onClickaway: onClickaway,
  },
  template: '<p v-on-clickaway="away">Click away</p>',
  methods: {
    away: function() {
      console.log('clicked away');
    },
  },
};

You can pass an argument conataining any HTML DOM Event on the directive in the markup:

 <p v-on-clickaway:mousedown="away">Click away</p>
<!-- If you don't pass an argument it'll default to click just like previous versions -->

Caveats

Pay attention to the letter case. onClickaway turns into v-on-clickaway,
while onClickAway turns into v-on-click-away.
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)".
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.