Package Exports

vue-clickaway
vue-clickaway/index

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-clickaway) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-clickaway

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

$ npm install vue-clickaway --save

From CDN, chose the one you prefer:

<script src="https://cdn.jsdelivr.net/npm/vue-clickaway@2.2.2/dist/vue-clickaway.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-clickaway/2.2.2/vue-clickaway.min.js"></script>
<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/2.2.2/dist/vue-clickaway.min.js"></script>

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-clickaway';

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-clickaway';

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

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.

License

MIT