vue-clickout-handler
v1.0.6
Published
Zero dependencies directive to detect click events outside of a certain element
Downloads
7
Maintainers
Readme
Description
This is a simple directive to react when a click happens outside of a certain element.
Installation
npm install vue-clickout-hanlder --save
yarn add vue-clickout-hanlder
Basic Usage
// main.js
import { VueClickOut } from 'vue-clickout-handler';
Vue.directive('click-out', VueClickOut)
You can pass just a callback and it will be used as handler
<template>
<div v-click-out="onClickOut">
...
</div>
</template>
<script>
export default {
methods: {
onClickOut () {
// do something
}
}
}
</script>
Or you can pass an object to include more options:
<template>
<div id="my-div">
</div>
<div v-click-out="{ handler: onClickOut, excluded: ['#my-div'], disabled: disabled}">
...
</div>
</template>
<script>
export default {
data () {
return {
disabled: false
}
},
methods: {
onClickOut () {
// do something
}
}
}
</script>