博客站

在 Vue 3 中，自定义指令允许你直接操作 DOM 元素。自定义指令可以用于处理一些常见的 DOM 操作，如表单自动聚焦、元素拖拽、图片懒加载等。Vue 3 中的自定义指令与 Vue 2 类似，但在 Composition API 中有一些新的用法。

自定义指令的基本结构

在 Vue 3 中，自定义指令通过 app.directive 方法注册。一个自定义指令可以包含以下几个钩子函数：

• created：在绑定元素的 attribute 或事件监听器被应用之前调用。
• beforeMount：在元素被插入到 DOM 之前调用。
• mounted：在绑定元素的父组件挂载后调用。
• beforeUpdate：在包含组件的 VNode 更新之前调用。
• updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
• beforeUnmount：在绑定元素的父组件卸载之前调用。
• unmounted：在绑定元素的父组件卸载后调用。

全局自定义指令

你可以通过 app.directive 方法注册一个全局自定义指令。

import { createApp } from 'vue';

const app = createApp({});

app.directive('focus', {
  mounted(el) {
    el.focus();
  },
});

app.mount('#app');

在这个例子中，我们注册了一个名为 v-focus 的全局指令，当元素被插入到 DOM 时，它会自动获得焦点。

局部自定义指令

你也可以在组件中定义局部自定义指令。

export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      },
    },
  },
};

在这个例子中，v-focus 指令只在当前组件中可用。

自定义指令的参数

自定义指令可以接受参数、修饰符和值。你可以在钩子函数中通过 binding 对象访问这些信息。

• binding.value：指令的绑定值。
• binding.oldValue：指令的前一个绑定值（仅在 beforeUpdate 和 updated 中可用）。
• binding.arg：指令的参数。
• binding.modifiers：指令的修饰符对象。

示例：自定义指令接受参数和修饰符

app.directive('color', {
  mounted(el, binding) {
    el.style.color = binding.value;
    if (binding.modifiers.bold) {
      el.style.fontWeight = 'bold';
    }
  },
  updated(el, binding) {
    el.style.color = binding.value;
    if (binding.modifiers.bold) {
      el.style.fontWeight = 'bold';
    }
  },
});

在这个例子中，v-color 指令可以根据绑定值设置元素的颜色，并且可以通过 bold 修饰符将字体加粗。

<div v-color:red.bold="'blue'">This text will be blue and bold.</div>

在 Composition API 中使用自定义指令

在 Composition API 中，你可以使用 onMounted、onUpdated 等生命周期钩子来实现自定义指令的逻辑。

import { onMounted, onUpdated } from 'vue';

export default {
  setup() {
    const vFocus = {
      mounted(el) {
        el.focus();
      },
    };

    return {
      vFocus,
    };
  },
};

在这个例子中，我们在 setup 函数中定义了一个局部自定义指令 vFocus，并在 mounted 钩子中实现自动聚焦的逻辑。

总结

Vue 3 中的自定义指令提供了一种强大的方式来直接操作 DOM 元素。你可以通过全局或局部的方式注册自定义指令，并在指令的钩子函数中实现具体的逻辑。自定义指令可以接受参数、修饰符和值，使得它们非常灵活和强大。

• 全局自定义指令：通过 app.directive 注册。
• 局部自定义指令：在组件中通过 directives 选项定义。
• 指令参数：通过 binding 对象访问参数、修饰符和值。
• Composition API：可以在 setup 函数中使用生命周期钩子实现自定义指令的逻辑。

通过自定义指令，你可以轻松地处理一些常见的 DOM 操作，使得代码更加简洁和易于维护。