Vue自定义属性实现输入框相关组件显示与隐藏
directives: {
clickOutside: {/* 指令生命周期 */
bind(el, binding, vnode) {
/* 把事件绑定在document上 看节点是否在当前元素内部 */
let handler = (e) => {
/* 判断是否在div内部 */
if (el.contains(e.target)) {
if (!vnode.context.isVisible)
vnode.context.focus();
} else {
if (vnode.context.isVisible)
vnode.context.blur();
}
}
el.handler = handler;
document.addEventListener('click', handler);
},
unbind(el) {
el.removeEventListener('click', el.handler);
}
}
}