vue3判断点击的是否是元素之外的区域

记录vue3判断点击的是否是元素之外的区域。

使用的是自定义指令来完成，在需要进行判断的元素上绑定一个自定义指令，就行v-click这样，这就需要使用vue的自定义指令，因为我使用的是setup语法糖，所以可以不用像以前那样使用diectives属性来定义指令，直接声明在指令名字前加一个v，使用小驼峰命名就可以了，类似vClick、vDemo这样，setup会自己注册好这个指令，在组件中使用就可以了

<div v-click-outside="绑定的事件名"></div>

在自定义指令的钩子函数里面创建一个判断当前绑定元素和点击元素是否为一个元素的函数，

 function eventHandler(e) {
      if (el.contains(e.target)) {
        return false;
      }
      if (binding.value && typeof binding.value === 'function') {
        binding.value(e);
      }
    }

通过监听单机事件来执行判断函数，在挂载阶段添加监听：

// 用于销毁前注销事件监听
    el.Tag = eventHandler;
    // 添加事件监听
    document.addEventListener('click', eventHandler);

在组件卸载阶段把监听卸载掉：

 beforeUnmount(el) {
    // 移除事件监听
    document.removeEventListener('click', el.Tag);
    // 删除属性
    delete el.Tag;
  }

这样指令就可以使用了，在模板中传入自己的函数即可，完整的代码：

const vClickOutside = {
  mounted(el, binding) {
    function eventHandler(e) {
      if (el.contains(e.target)) {
        return false;
      }
      if (binding.value && typeof binding.value === 'function') {
        binding.value(e);
      }
    }
    el.Tag= eventHandler;
    document.addEventListener('click', eventHandler);
  },
  beforeUnmount(el) {
    document.removeEventListener('click', el.Tag);
    delete el.Tag;
  }
};