@qs-coder/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 @qs-coder/vue-clickaway exists. Please check out the demo before reading further.

Requirements

• vue: ^3.0.0

If you need a version for Vue 1.x, try vue-clickaway@1.0. If you need a version for Vue 2.x, try vue-clickaway@2.2.2.

Install

From npm:

$ npm install @qs-coder/vue-clickaway --save

From CDN, chose the one you prefer:

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

Usage

1. Make the directive available to your component
2. Define a method to be called
3. Use the directive in the template

import { directive as onClickaway } from '@qs-coder/vue-clickaway';

export default {
  directives: {
    onClickaway: onClickaway,
  },
  template: '<p v-on-clickaway="away">Click away</p>',
  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.
2. Prior to vue@^3.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)".
3. 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