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);
         }
     }
 }
posted @ 2020-04-08 08:59  aeipyuan  阅读(2871)  评论(0编辑  收藏  举报