v-bound-click-outside
v0.1.0
Published
Vue directive to react on clicks outside an element.
Downloads
5
Readme
v-bound-click-outside
Vue directive to react on clicks outside an element without stopping the event propagation. Great for closing dialogues, menus among other things.
Fork of ndelvalle/v-bound-click-outside that only calls the passed function when isBound
is true. Perfect for preventing function calls when a dropdown is closed.
Install
$ npm install --save v-bound-click-outside
$ yarn add v-bound-click-outside
Use
import Vue from 'vue'
import vClickOutside from 'v-bound-click-outside'
Vue.use(vClickOutside)
<script>
export default {
data: {
isDropdownOpen: false
},
methods: {
onClickOutside (event) {
console.log('Clicked outside. Event: ', event)
}
}
};
</script>
<template>
<div v-bound-click-outside="{ isBound: isDropdownOpen, function: onClickOutside }"></div>
</template>
Or use it as a directive
import vClickOutside from 'v-bound-click-outside'
<script>
export default {
data: {
isDropdownOpen: false
},
directives: {
clickOutside: vClickOutside.directive
},
methods: {
onClickOutside (event) {
console.log('Clicked outside. Event: ', event)
}
}
};
</script>
<template>
<div v-bound-click-outside="{ isBound: isDropdownOpen, function: onClickOutside }"></div>
</template>
On touch devices, the plugin adds 'touchstart' and 'click' event listeners to support laptops with touch screen. Use 'notouch' modifier, to avoid 'click' event to be fired.
<template>
<div v-bound-click-outside.notouch="{ isBound: isDropdownOpen, function: onClickOutside }"></div>
</template>