vue3自定义指令实现v-click-outside

1.在script 中定义自定义指令代码

const vClickOutside = {
  mounted(el:any, binding:any) {
    // 在指令绑定到元素时执行的代码
    const onClickOutside = (event:any) => {
      if (!el.contains(event.target) && el !== event.target) {
             binding.value()
      }
    };
    document.addEventListener('click', onClickOutside);
    el._clickoutside = onClickOutside;
  },
  beforeUnmount(el:any) {
    // 在指令从元素上解绑时执行的代码
    document.removeEventListener('click', el._clickoutside);
    delete el._clickoutside;
  },
};

2.在template模版中，需要用到的标签上添加自定义指令及相关方法名

<router-link
    v-for="tab in editableTab"
    :key="tab.path"
    :data-path="tab.path"
    :class="isActive(tab) ? 'fcm-tabs-list-active' : ''"
    class="fcm-tabs-list"
    :to="{ path: tab.path, query: tab.query }"
    @contextmenu.prevent.stop="openMenu(tab, $event)"
    v-click-outside="closeMenu"
            
 ></router-link>

亲测有效，测试系统:windows11,mac;代码比较潦草，大佬们可以自己优化