v-click-outside
Vue directive to react on clicks outside an element without stopping the event propagation. Great for closing dialogues, menus among other things.
Install
$ npm install --save v-click-outside$ yarn add v-click-outsideUse
import Vue from 'vue'
import vClickOutside from 'v-click-outside'
Vue.use(vClickOutside)<script>
export default {
data () {
vcoConfig: {
handler: this.handler,
middleware: this.middleware,
events: ['dblclick', 'click']
}
},
methods: {
onClickOutside (event, el) {
console.log('Clicked outside. Event: ', event)
},
handler (event, el) {
console.log('Clicked outside (Using config), middleware returned true :)')
},
// Note: The middleware will be executed if the event was fired outside the element.
// It should have only sync functionality and it should return a boolean to
// define if the handler should be fire or not
middleware (event, el) {
return event.target.className !== 'modal'
}
}
};
</script>
<template>
<div v-click-outside="onClickOutside"></div>
<div v-click-outside="vcoConfig"></div>
</template>Or use it as a directive
import vClickOutside from 'v-click-outside'
<script>
export default {
directives: {
clickOutside: vClickOutside.directive
},
methods: {
onClickOutside (event) {
console.log('Clicked outside. Event: ', event)
}
}
};
</script>
<template>
<div v-click-outside="onClickOutside"></div>
</template>Example
Migrate from version 1
The notouch modifier is not longer supported, same functionality can be achieved using a middleware function