1.directive.js
import Vue from "vue";
// 提交验证
Vue.directive("clickOutside", {
// 初始化指令
bind(el, binding, vnode) {
function clickHandler(e) {
// 这里判断点击的元素是否是本身,是本身,则返回
if (el.contains(e.target)) {
return false;
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
binding.value(e);
}
}
// 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
el.__vueClickOutside__ = clickHandler;
document.addEventListener("click", clickHandler);
},
update() {},
unbind(el, binding) {
// 解除事件监听
document.removeEventListener("click", el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
});
2.main.js
//自定义指令引入
import './directive/directive'
3.使用
<div v-click-outside="isShowAgree"></div>
这是全局的写法,使用起来十分简单,如果是另外的元素点击出现的相关div,使用@click.stop就可以解决了