自定义指令,全局注册
Vue.directive("click-outside", {
// el就是绑定指令的元素,bindings.expression就是动态参数这里是hide,vnode是绑定指令的元素的虚拟节点,vnode.context就是节点所在的vm实例
bind(el, bindings, vnode) {
el.handle = e => {
// 点击的是 绑定指令元素么 不是就触发 参数传进来的函数
if (!el.contains(e.target)) {
let method = bindings.expression;
vnode.context[method]();
}
};
document.addEventListener("click", el.handle);
},
unbind(el) {
// 相关事件移除
document.removeEventListener("click", el.handle);
}
});