To define a directive that triggers a function when the user clicks outside of the bound element in Vue Js, you can write it like below. Having this directive is very powerful when creating a model/popper component that has a clickable backdrop to close/hide the particular component.
<template>
<div v-clickaway="clickOutside">Hide me</div>
</template>
<script>
Vue.directive('clickaway', {
bind (el, { value }) {
if (typeof value !== 'function') {
console.warn(`Expect a function, got ${value}`);
return;
}
document.addEventListener('click', e => el.contains(e.target) || value());
}
});
export default {
methods: {
clickOutside () {
// your logic here
}
}
}
</script>
