vue3自定义多个指令

在Vue3中，可以使用directive函数来自定义指令。下面是一个示例，演示如何定义多个指令：

import { directive } from 'vue';

// 定义一个自定义指令 v-focus
const focusDirective = directive('focus', {
  mounted(el) {
    el.focus();
  }
});

// 定义一个自定义指令 v-color
const colorDirective = directive('color', (el, binding) => {
  el.style.color = binding.value;
});

// 在组件中使用这些自定义指令
export default {
  directives: {
    focus: focusDirective,
    color: colorDirective
  }
}

在上面的示例中，我们定义了两个自定义指令：focus和color。focus指令用于在组件挂载时自动将焦点设置在元素上，color指令用于设置元素的文本颜色。

在组件中使用这些自定义指令时，需要将它们添加到directives选项中。在模板中使用指令时，可以像使用内置指令一样使用它们：

<template>
  <div>
    <input v-focus>
    <p v-color="'red'">This text is red</p>
  </div>
</template>

在上面的示例中，我们在<input>元素上使用了v-focus指令，在<p>元素上使用了v-color指令，并将其绑定到'red'值。