Vue directive指令的用法（附带实例）

Vue 代码的封装方式有很多种，主要有 component（组件）、filter（过滤器）、directive（指令）、mixin（混入）、hook（钩子）、plugin（插件）、library（类库）、framework（框架）等。其中 mixin 在 Vue3 中已经被移除，取而代之的是 Vue3 特有的 hook（钩子），本节主要介绍 directive（指令）的相关知识。

自定义指令主要包括 created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted 钩子函数。读者可能也发现了，这些钩子函数除没有 beforeCreate 外，其余的和 Vue 的生命周期钩子函数一样。除保持了名称的一致性外，在参数方面也基本相同，主要包括目标操作元素 el、数据绑定对象 binding、虚拟 DOM 对象 vnode 及旧虚拟 DOM 对象 prevVnode 等。

钩子函数的参数主要使用目标操作元素 el 和数据绑定对象 binding。binding 中主要有参数 arg、修饰符 modifiers、数据值 value。

现在想要利用自定义指令实现一个“霓虹灯闪烁”功能。首先在 main.js 文件中进行 app.directive 全局指令注册，或者在 Vue3 中利用 directive 进行局部自定义指令注册。

需要注意的是，参数 arg 和自定义指令间需要使用冒号分隔，而修饰符 modifiers 则需要使用点号连接，至于数据值 value 则需要使用等号设置。然后在 main.js 文件中使用 app.directive 方法，该方法的第 1 个参数为指令名，可以指定为 highlight，第 2 个参数为配置对象，而配置对象中则包括上面提及的自定义指令的钩子函数。在实际开发项目中，我们用得最多的是 mounted 钩子函数，它在组件挂载后执行，主要使用 el 与 binding 这两个参数。

此时 main.js 文件代码如下：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('highlight', {
  // 自定义指令的 mounted 钩子函数
  mounted(el, binding) {
    let delay = 0;
    // 利用 binding.modifiers 获取 delayed 修饰符值进行判断
    // 如果有此修饰符，则将 delay 值设置为 3000
    if (binding.modifiers.delayed) {
      delay = 3000;
    }
    // 利用 binding.modifiers 获取 blink 修饰符值进行判断
    // 如果有此修饰符，则实现闪烁效果
    if (binding.modifiers.blink) {
      // 利用 binding.value 获取主颜色及次颜色
      let mainColor = binding.value.mainColor;
      let secondColor = binding.value.secondColor; // 设置当前颜色为主颜色
      let currentColor = mainColor; // 设置延时定时器
      setTimeout(() => {
        // 设置闪烁定时器
        setInterval(() => {
          // 使用三元运算确认当前颜色
          currentColor == secondColor
            ? (currentColor = mainColor)
            : (currentColor = secondColor);
          if (binding.arg === 'background') {
            // 背景
            el.style.backgroundColor = currentColor;
          } else {
            // 字体
            el.style.color = currentColor;
          }
        }, binding.value.delay); // 闪烁间隔时间
      }, delay); // 延迟 3 秒
    } else {
      // 如果没有 blink 修饰符，则直接设置颜色
      setTimeout(() => {
        // 利用 binding.arg 获取 background 参数值进行判断
        if (binding.arg === 'background') {
          // 背景颜色设置
          el.style.backgroundColor = binding.value.mainColor;
        } else {
          // 字体颜色设置
          el.style.color = binding.value.mainColor;
        }
      }, delay); // 延迟 3 秒
    }
  },
});

app.mount('#app');

注册好全局指令后，就可以调用了。在项目的任何一个组件中只需要通过 v-highlight 就可以调用当前定义的“霓虹灯闪烁”效果指令。这里我们实现的效果是，在延迟 3 秒后，产生红绿背景颜色的切换效果，每次切换时间是 500 毫秒。

App.vue 文件代码如下：

<template>

    <!-- background 为钩子函数的 binding 中的 arg 参数 -->
    <!-- delayed 与 blink 为钩子函数的 binding 中的 modifiers 修饰符内容 -->
    <!-- {mainColor:'red',secondColor:'green',delay:500} 为钩子函数的 binding 中的 value 值内容 -->
  <p
    v-highlight:background.delayed.blink="{
      mainColor: 'red',
      secondColor: 'green',
      delay: 500,
    }"
  >
    自定义指令的调用
  </p>
</template>

Vue directive指令的用法（附带实例）

相关文章