如何将Vue2点击外部检测自定义指令改写为Vue3兼容版本？

原Vue2指令代码 #

import { DirectiveOptions } from 'vue';

export default {
  bind: (el: any, binding, vnode) => {
    el.clickOutsideEvent = (event: any) => {
      const clickedOutsideTargetAndChildren = !(el == event.target || el.contains(event.target!));
      const targetInDOM = document.body.contains(event.target);
      const bodyIsFocused = document.activeElement === document.body;

      if (clickedOutsideTargetAndChildren && targetInDOM && bodyIsFocused && vnode.context) {
        const vueContext = vnode.context as any;
        vueContext[binding.expression!](event);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent)
  },
  unbind: (el: any) => {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  },
} as DirectiveOptions

你尝试的Vue3雏形代码 #

clickOutside: { 
  beforeMount : (el: any, binding: any, vnode: any) => {
    el.clickOutsideEvent = (event: any) => {
      const clickedOutsideTargetAndChildren = !(el === event.target || el.contains(event.target!));
      const targetInDOM = document.body.contains(event.target);
      const bodyIsFocused = document.activeElement === document.body;
      console.log(vnode.context);//undefined
      console.log('binding.instance',binding.instance);//returns vue instance
      if (clickedOutsideTargetAndChildren && targetInDOM && bodyIsFocused && vnode.context) {
        const vueContext = vnode.context as any;
        vueContext[binding.expression!](event);// what is this???
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent)
  },

  unmounted : (el: any) => {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  }
}

最终兼容Vue3的指令代码 #

import type { Directive } from 'vue';

const clickOutside: Directive = {
  beforeMount(el: HTMLElement, binding) {
    el.clickOutsideEvent = (event: MouseEvent) => {
      const clickedOutsideTargetAndChildren = !(el === event.target || el.contains(event.target as Node));
      const targetInDOM = document.body.contains(event.target as Node);
      const bodyIsFocused = document.activeElement === document.body;

      // 验证条件且确保绑定的是可执行函数
      if (clickedOutsideTargetAndChildren && targetInDOM && bodyIsFocused && typeof binding.value === 'function') {
        binding.value(event); // 直接调用绑定的回调函数
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent);
  },
  unmounted(el: HTMLElement) {
    document.body.removeEventListener('click', el.clickOutsideEvent);
    // 清理元素上的自定义属性，避免内存泄漏
    delete el.clickOutsideEvent;
  }
};

export default clickOutside;

关键改动说明 #

• 钩子函数适配：Vue2的bind对应Vue3的beforeMount，unbind对应unmounted，这部分你已经正确替换。
• 回调调用逻辑简化：Vue3中binding.value直接指向指令绑定的回调函数，无需再通过vnode.context和binding.expression查找上下文执行方法，直接调用binding.value(event)即可。
• 类型规范：使用Vue3提供的Directive类型替代Vue2的DirectiveOptions，类型校验更严谨。
• 内存泄漏防护：在unmounted钩子中删除挂载在元素上的clickOutsideEvent属性，避免残留引用导致内存泄漏。
• 条件判断优化：移除对vnode.context的无效判断，改为校验binding.value是否为函数，避免非函数绑定导致的执行错误。

内容的提问来源于stack exchange，提问作者Dain Verd