vue3 封装自定义指令

要封装自定义指令，你可以按照以下步骤进行操作：

1. 创建一个新的 Vue 指令。在 Vue 3 中，可以使用 `app.directive` 方法来创建指令。

app.directive('myDirective', {
  // 指令选项
});

2. 在指令选项中，你需要定义以下几个钩子函数（可选）：

- `beforeMount`：在指令绑定元素挂载到DOM之前调用。
- `mounted`：在指令绑定元素挂载到DOM后调用。
- `beforeUpdate`：在指令所在组件更新之前调用。
- `updated`：在指令所在组件更新之后调用。
- `beforeUnmount`：在指令所在组件卸载之前调用。
- `unmounted`：在指令所在组件卸载后调用。

这些钩子函数允许你在指令的生命周期中执行相应的操作。

3. 在钩子函数中，你可以使用 `el` 参数获取到指令所绑定的 DOM 元素。通过操作 DOM 元素，你可以实现指令的功能。

下面是一个示例，演示了如何封装一个简单的自定义指令来实现点击元素时改变背景颜色的效果：

app.directive('changeBackground', {
  beforeMount(el) {
    el.style.backgroundColor = 'yellow';
  },
  mounted(el) {
    el.addEventListener('click', this.onClick);
  },
  beforeUnmount(el) {
    el.removeEventListener('click', this.onClick);
  },
  onClick(event) {
    event.target.style.backgroundColor = 'red';
  }
});

在上面的示例中，指令名称为 `changeBackground`，在 `beforeMount` 钩子函数中设置初始背景颜色为黄色，在 `mounted` 钩子函数中添加点击事件监听器，点击元素时调用 `onClick` 方法来改变背景颜色为红色，在 `beforeUnmount` 钩子函数中移除点击事件监听器。

你可以根据自己的需求，在钩子函数中实现自定义指令的具体功能。希望对你有所帮助！