JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

Vue点击盒子以外执行指令

2022. 04. 21    

Vue点击盒子以外执行指令

vue 点击盒子以外执行指令

<div class="year-wrap" v-if="yearWrapShow" v-clickOutside="yearWrapHide()"></div>
methods:{
	yearWrapHide(){
		console.log('执行')
	}
}
directives:{
    clickOutside:{
       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) {
        // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
      },
    }
  }