自定义指令

157 阅读1分钟

自定义指令,全局注册


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);
    }
});