根据elementui的自定义指令写一个简化版,详细注释
// 缓存所有绑定指令的el
const nodeList = [];
// 标识符-任意不重复字符均可-使用的elementui的
const ctx = '@@clickoutsideContext';
// mousedown 对应的 event
let startClick;
// id
let seed = 0;
// 绑定startClick的 event
document.addEventListener('mousedown', e => (startClick = e));
// 执行所有el 在bind时绑定的方法
document.addEventListener('mouseup', e => {
nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
});
function createDocumentHandler(el, binding, vnode) {
// mouseup为鼠标松开时对应的event
// mousedown为鼠标点击时对应的event
return function(mouseup = {}, mousedown = {}) {
// 以下所有的事件均 return;
if (
// vnode不存在
!vnode ||
// vnode的context不存在
!vnode.context ||
// 鼠标松开时的dom不存在
!mouseup.target ||
// 鼠标点击时的dom不存在
!mousedown.target ||
// 松开时的dom是当前el的子元素
el.contains(mouseup.target) ||
// 点击时的dom是当前el的子元素
el.contains(mousedown.target) ||
// 点击的是当前dom
el === mouseup.target ||
// vnode.context的popperElm存在且包含 点击/松开 鼠标时的dom
(vnode.context.popperElm &&
(vnode.context.popperElm.contains(mouseup.target) ||
vnode.context.popperElm.contains(mousedown.target)))) return;
// expression存在 且 el[ctx].methodName存在(bind时绑定)且 vnode中含有这个方法 -> 执行vnode中的方法
if (binding.expression &&
el[ctx].methodName &&
vnode.context[el[ctx].methodName]) {
vnode.context[el[ctx].methodName]();
} else {
// 否则执行bind时绑定的value
el[ctx].bindingFn && el[ctx].bindingFn();
}
};
}
/**
* 钩子函数
* bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
* inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
* update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
* 指令的值可能发生了改变,也可能没有。
* 但是你可以通过比较更新前后的值来忽略不必要的模板更新。
* componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
* unbind:只调用一次,指令与元素解绑时调用。
*
*/
// 钩子函数参数
// 指令钩子函数会被传入以下参数:
// el:指令所绑定的元素,可以用来直接操作 DOM。
// binding:一个对象,包含以下 property:
// name:指令名,不包括 v- 前缀。
// value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。
// oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
// expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。
// arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。
// modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
// vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
// oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
export default {
bind(el, binding, vnode) {
nodeList.push(el);
const id = seed++;
el[ctx] = {
id,
// 绑定handler事件
documentHandler: createDocumentHandler(el, binding, vnode),
// 表达式
methodName: binding.expression,
// 指令的绑定值
bindingFn: binding.value
};
},
// 重新绑定
update(el, binding, vnode) {
el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
el[ctx].methodName = binding.expression;
el[ctx].bindingFn = binding.value;
},
// nodeList移除对应的el
unbind(el) {
let len = nodeList.length;
for (let i = 0; i < len; i++) {
if (nodeList[i][ctx].id === el[ctx].id) {
nodeList.splice(i, 1);
break;
}
}
delete el[ctx];
}
};