玩转 Vue 3：自定义指令让页面魔法随心而动-CSDN博客

本文链接：https://blog.csdn.net/wx126851880/article/details/146927987

玩转 Vue 3：自定义指令让页面魔法随心而动

玩转 Vue 3：自定义指令让页面魔法随心而动

玩转 Vue 3：自定义指令让页面魔法随心而动

在 Vue 3 中，自定义指令为我们提供了在模板中直接操作 DOM 的能力，不仅可以让我们的页面效果更炫酷，还能将一些通用逻辑抽离出来，做到代码复用。本文将带你了解 Vue 3 自定义指令的基础用法和高级应用，并通过丰富的代码示例，帮助你快速掌握这一技能。

什么是自定义指令？

自定义指令是一种扩展 Vue 模板语法的方式，可以在元素挂载、更新或销毁时执行特定的逻辑。在 Vue 3 中，我们可以使用全局或局部方式注册指令，指令内置了多个生命周期钩子，如：

created：在指令第一次绑定到元素时调用
beforeMount、mounted：在元素插入到 DOM 前后调用
beforeUpdate、updated：在组件更新前后调用
beforeUnmount、unmounted：在元素销毁前后调用

这些钩子使得我们可以在不同阶段对 DOM 进行精准控制。

全局注册示例：高亮效果指令

这里我们以一个高亮效果指令为例，展示如何全局注册自定义指令，让指定元素自动应用背景高亮。

注册自定义指令

在 Vue 3 中，我们可以在创建应用实例时调用 app.directive 方法注册全局指令。下面的示例中，我们创建了一个 v-highlight 指令，可以根据绑定值设置元素的背景颜色，如果未传入颜色，则默认使用黄色高亮。

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('highlight', {
  // 当绑定元素被插入到 DOM 中时调用
  mounted(el, binding) {
    // binding.value 为指令传入的颜色值
    el.style.backgroundColor = binding.value || 'yellow'
  },
  // 当绑定的值更新时调用
  updated(el, binding) {
    el.style.backgroundColor = binding.value || 'yellow'
  }
})

app.mount('#app')

在组件中使用

注册完成后，我们可以在任意组件的模板中使用 v-highlight 指令：

<!-- HighlightExample.vue -->
<template>
  <div>
    <h2>高亮效果示例</h2>
    <!-- 使用传入参数设置背景色 -->
    <p v-highlight="'lightblue'">这段文字将拥有浅蓝色背景。</p>
    <!-- 未传入参数，则使用默认高亮色 -->
    <p v-highlight>这段文字将默认使用黄色高亮。</p>
  </div>
</template>

<script setup>
// 无需额外引入，因为 v-highlight 已经全局注册
</script>

当页面渲染时，你会看到第一段文字背景为浅蓝色，第二段文字则呈现黄色高亮效果。

局部注册与高级用法

除了全局注册，我们也可以在单个组件中局部注册指令。局部指令只对当前组件生效，有助于避免全局命名冲突。

局部注册示例

<!-- LocalDirectiveExample.vue -->
<template>
  <div v-local-highlight="'pink'">
    <h2>局部指令示例</h2>
    <p>这段区域会被应用粉色高亮效果。</p>
  </div>
</template>

<script>
export default {
  directives: {
    localHighlight: {
      mounted(el, binding) {
        el.style.backgroundColor = binding.value || 'yellow'
      },
      updated(el, binding) {
        el.style.backgroundColor = binding.value || 'yellow'
      }
    }
  }
}
</script>

在这个示例中，我们通过组件的 directives 选项局部注册了一个 localHighlight 指令，实现的效果与全局指令类似。