vue3 自定义指令封装

Vue 3 中的自定义指令封装可以通过 `directive` 函数来实现。下面是一个简单的示例：

// 创建一个自定义指令
const myDirective = {
  // 指令绑定时触发
  mounted(el, binding) {
    // 在元素上添加样式
    el.style.color = binding.value;
  },
  // 指令更新时触发
  updated(el, binding) {
    // 更新元素的样式
    el.style.color = binding.value;
  },
  // 指令解绑时触发
  unmounted(el) {
    // 清除元素的样式
    el.style.color = '';
  }
};

// 在 Vue 应用中使用自定义指令
const app = Vue.createApp({
 // ...
});

app.directive('my-directive', myDirective);

在上面的示例中，我们创建了一个名为 `myDirective` 的自定义指令对象，它包含了 `mounted`、`updated` 和 `unmounted` 这三个生命周期钩子函数。在 `mounted` 钩子函数中，我们可以对元素进行初始化操作；在 `updated` 钩子函数中，我们可以根据传入的参数更新元素的样式；在 `unmounted` 钩子函数中，我们可以清除元素的样式。

然后，我们通过 `app.directive` 方法将自定义指令注册到 Vue 应用中，指令的名称为 `'my-directive'`。

使用自定义指令时，可以在模板中通过 `v-my-directive` 的方式来调用，例如：

<div v-my-directive="'red'">Hello, Vue 3!</div>

上述代码中，我们将自定义指令 `my-directive` 应用到一个 `<div>` 元素上，并传入了参数 `'red'`，这会将元素的文字颜色设置为红色。