vue3点击自定义指令

Vue3中的自定义指令可以通过使用`directive`函数来创建。在创建自定义指令时，需要指定指令的名称和相关的钩子函数。例如，对于一个点击自定义指令，可以使用以下代码：

import { directive } from 'vue';

const clickOutside = {
  beforeMount(el, binding) {
    el.clickOutsideEvent = function (event) {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value();
      }
    };
    document.addEventListener('click', el.clickOutsideEvent);
  },
  unmounted(el) {
    document.removeEventListener('click', el.clickOutsideEvent);
  },
};

export default directive('click-outside', clickOutside);

在上面的代码中，我们定义了一个名为`click-outside`的自定义指令，并实现了`beforeMount`和`unmounted`钩子函数。`beforeMount`钩子函数会在指令绑定到元素上时被调用，我们在这里添加了一个事件监听器，用于检测点击事件是否发生在元素外部。如果是，则调用绑定的函数。`unmounted`钩子函数会在指令与元素解绑时被调用，我们在这里移除了之前添加的事件监听器。

使用自定义指令时，可以通过`v-`前缀来指定指令名称，并使用`:`语法来传递参数。例如，对于上面定义的`click-outside`指令，可以在模板中这样使用：

<template>
  <div v-click-outside="handleClickOutside">
    ...
  </div>
</template>

<script>
export default {
  methods: {
    handleClickOutside() {
      // 处理点击事件
    },
  },
};
</script>

在上面的代码中，我们将`click-outside`指令绑定到一个`div`元素上，并传递了一个名为`handleClickOutside`的方法作为参数。当用户在`div`元素外部点击时，`handleClickOutside`方法会被调用。