vue3自定义指令

下面是一个使用Vue3的自定义指令的示例代码：

import { createApp, DirectiveBinding } from 'vue';

const app = createApp({});

// 自定义指令：点击外部关闭弹窗
app.directive('click-outside', {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const handler = (e: MouseEvent) => {
      if (!el.contains(e.target as Node)) {
        binding.value();
      }
    };

    document.addEventListener('click', handler);

    // 在组件卸载时移除事件监听器
    const unmount = () => {
      document.removeEventListener('click', handler);
    };

    // 在组件更新时重新绑定事件监听器
    app.mixin({
      beforeUnmount: unmount
    });
  }
});

app.mount('#app');

在上面的代码中，我们定义了一个名为click-outside的自定义指令。这个指令用于实现点击元素外部关闭弹窗的功能。

在指令的mounted钩子函数中，我们绑定了一个事件监听器，当点击页面其他位置时，会触发指令的binding.value，也就是传入的回调函数。这样就可以通过在组件中使用v-click-outside指令，并传入一个回调函数来实现点击元素外部关闭弹窗的效果。

同时，我们还通过混入beforeUnmount钩子函数，在组件卸载时移除事件监听器，避免内存泄漏。这样，在组件被销毁时，会自动移除对应的事件监听器。

你可以将上面的代码复制到一个Vue3项目中的main.ts文件中，然后在组件的模板中使用v-click-outside指令来实现点击元素外部关闭弹窗的功能。