自定义指令点击非自身事件（空白处）

directives.ts

// 自定义指令点击非自身事件（空白处）
const clickOutSide = {
  beforeMount(el: any, binding: any) {
    function documentHandler(e: any) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) return false;
      // 判断指令中是否绑定了函数
      if (binding.value) {
        // 有绑定函数，则执行函数
        binding.value(e);
      }
    }
    // 给当前元素绑定个私有变量，方便在unmounted中可以解除事件监听
    el.__vueClickOutside__ = documentHandler;
    document.addEventListener('click', documentHandler);
  },
  unmounted(el: any) {
    document.removeEventListener('click', el.__vueClickOutside__);
    delete el.__vueClickOutside__;
  }
}

//拦截点击事件
const clickDirective = {
  mounted(el:any,binding:any){
    el.addEventListener('click',()=>{
      console.log(`用户点击了${binding.value}`);
    })
  }
}

const directives = {
  install: function (app: any) {
    app.directive('clickOutSide', clickOutSide)
    app.directive('click',clickDirective)
  }
};
export default directives;

main.ts

import Directives from "@/utils/directives";
const app = createApp(App)
app.use(Directives)

index.vue

<div class="search_input" v-clickOutSide="clickNoDom"></div>