vue 自定义指令

vue自定义指令

vue的clikOut指令：点击弹框外面的空白处使弹框消失的自定义全局指令

1. 代码

export const clickout = Vue.directive('clickout', {
  // 初始化指令
  bind(el, binding, vnode) {
    function clickHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e)
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = clickHandler
    document.addEventListener('click', clickHandler)
  },
  update() {},
  unbind(el, binding) {
    // console.log('解除')
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  },
})

2. 在main.js中引入

import './directives' //全局指令

3. 在组件内使用

<uf-input-el-wrap
    ref="inputWrap"
    v-clickout="clickOutHandler"
</uf-input-el-wrap>
methods:{
    clickOutHandler() {
      this.treeVisible = false
      this.focus = false
    },
}