vue 自定义下拉框 通过 directives 关闭 窗口

解决思路:监听窗体click事件 判断鼠标点击下的元素 是否包含在 下拉框里，不存在 则关闭

代码：

<div v-close="windowType"></div>

  directives: {
    close: {
      inserted(el, binding, vnode) {
        window.addEventListener('click', (e) => {
          if (!el.contains(e.target)) {
            vnode.context.showPanel = false
          }
        })
      }
    }
  },

注解：

vnode.context 访问到 当前vue文件下 data属性

el.contains 方法 表示 绑定了该directives 方法的元素 判断是否 包含了 当前点击的元素

拓展：

当业务场景存在多个自定义下拉框的时候，可以通过binding.value 传入进来的值 做判断,来选择关闭那个自定义下拉框