Package Exports

vue-clickaway2

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-clickaway2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 vue-clickaway@1.0.

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.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Ciro DE CARO}
💻 👀

_{Denis Konchekov}
💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT