https://github.com/idimetrix/vue2-click-outside
Vue 2 directive to react on clicks outside an element without stopping the event propagation
https://github.com/idimetrix/vue2-click-outside
Last synced: 6 months ago
JSON representation
Vue 2 directive to react on clicks outside an element without stopping the event propagation
- Host: GitHub
- URL: https://github.com/idimetrix/vue2-click-outside
- Owner: idimetrix
- Created: 2020-01-05T22:30:26.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-07T16:37:03.000Z (about 2 years ago)
- Last Synced: 2024-11-18T21:24:52.414Z (6 months ago)
- Language: JavaScript
- Size: 1.38 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue2-click-outside
Vue directive to react on clicks outside an element without stopping the event propagation.
## Install
```bash
$ npm install --save vue2-click-outside
```
```bash
$ yarn add vue2-click-outside
```
## Use
```js
import Vue from 'vue'
import Vue2ClickOutside from 'vue2-click-outside'
Vue.use(Vue2ClickOutside)
```
```js
export default {
data () {
clickOutsideConfig: {
handler: this.handler,
middleware: this.middleware,
events: ['dblclick', 'click'],
active: true
}
},
methods: {
onClickOutside (event, el) {
console.log('Clicked outside. Event: ', event)
},
handler (event, el) {
console.log('Clicked outside (Using config), middleware returned true :)')
},
middleware (event, el) {
return event.target.className !== 'modal'
}
}
};
```
Or use it as a directive
```js
import Vue2ClickOutside from 'vue2-click-outside'
export default {
directives: {
clickOutside: Vue2ClickOutside.directive
},
methods: {
onClickOutside (event) {
console.log('Clicked outside. Event: ', event)
}
}
};
```
## License
MIT