vue使用自定义指令 判断所点击区域是否在某个dom节点内

常用于自定义一个select 框功能

当前写在局部的组件中 javaScript 部分

  directives: {
    ClickOutSide: {
      bind (el, binding) {
        function handleFun (e) { // 判断所点击dom是否为el的节点
          if (el.contains(e.target)) {
            console.log('在节点内')
          } else {
            console.log('在节点外')
            binding.value(e)
          }
        }
        el.function = handleFun
        document.addEventListener('click', el.function)
      }
    }
  },

html 部分

  <input type="text" placeholder="请输入搜索内容"
           v-model="keyword"
           v-click-out-side="closeShowSearch“>