vue js 自定义指令 点击自身元素外触发事件 点击自身元素外隐藏自身

1、需求背景

自定义的搜索栏，点击红框以外的元素或区域时，关闭红框，类似弹窗的遮罩，点击遮罩就关闭弹窗。

2、实现代码

2.1 创建clickOutside.js文件

新建一个文件夹directive（专门放置一些指令文件），再创建一个文件夹click，把clickOutside.js文件放在click文件夹下面

/**
* v-clickOutside 点击元素外触发事件
*/

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

2.2 注册clickOutside.js这个指令文件

在文件夹directive下，创建index.js文件，代码内容如下

import clickOutside from './click/clickOutside'

const install = function(Vue) {
    
    
  Vue.directive('clickOutside', clickOutside)
}
export default install

2.3 在main.js文件中，引入指令

import directive from './directive' // directive
Vue.use(directive)

3、在vue页面文件中使用

<div v-click-outside="test">测试</div>

methods: {
    
    
	test() {
    
    
		// 在这里处理点击自身元素外的区域，需要进行什么逻辑操作，如隐藏自身元素等
	}
}

4、完成！