clickoutside.js
// Code Content
const clickoutsideContext = '@@clickoutsideContext';
export default {
bind(el, binding, vnode) {
const documentHandler = (e) => {
if (vnode.context && !el.contains(e.target)) {
vnode.context[el[clickoutsideContext].methodName]();
}
};
el[clickoutsideContext] = {
documentHandler,
methodName: binding.expression,
arg: binding.arg || 'click',
};
document.addEventListener(el[clickoutsideContext].arg, documentHandler);
},
update(el, binding) {
el[clickoutsideContext].methodName = binding.expression;
},
unbind(el) {
document.removeEventListener(
el[clickoutsideContext].arg,
el[clickoutsideContext].documentHandler);
},
install(Vue) {
Vue.directive ( 'clickoutside', {
bind: this.bind,
unbind: this.unbind,
});
},
};
use
In .vue file
1. introduction
import Clickoutside from '@/utils/clickoutside';
2. Introduction of custom instructions
directives: {
Clickoutside,
},
3. Use on the element
<div class="tel" v-clickoutside="do">
</div>
methods: {
do() {
the console.log ( 'click performed outside the elements of the elements of this method')
}
}
}