Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simplesmiler/vue-clickaway
Reusable clickaway directive for reusable Vue.js components
https://github.com/simplesmiler/vue-clickaway
vue
Last synced: 13 days ago
JSON representation
Reusable clickaway directive for reusable Vue.js components
- Host: GitHub
- URL: https://github.com/simplesmiler/vue-clickaway
- Owner: simplesmiler
- License: mit
- Created: 2015-09-13T10:21:30.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-06-30T11:23:41.000Z (4 months ago)
- Last Synced: 2024-10-26T23:54:37.926Z (15 days ago)
- Topics: vue
- Language: JavaScript
- Homepage:
- Size: 70.3 KB
- Stars: 963
- Watchers: 12
- Forks: 77
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - vue-clickaway ★33
README
# vue-clickaway
> Reusable clickaway directive for reusable [Vue.js](https://github.com/vuejs/vue) components
[](https://www.npmjs.com/package/vue-clickaway)
[](https://cdnjs.com/libraries/vue-clickaway)
## 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](https://jsfiddle.net/simplesmiler/4w1cs8u3/150/) before reading further.
## Requirements
- vue: ^2.0.0
If you need a version for Vue 1, try `[email protected]`.
## 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
2. Define a method to be called
3. 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`.
2. 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)"`.
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](https://opensource.org/licenses/MIT)