vue3自定义指令-CFANZ编程社区

在 Vue 3 中，自定义指令是一种强大的工具，它允许你对普通 DOM 元素进行底层操作，以实现一些特殊的交互效果或功能。下面将详细介绍 Vue 3 自定义指令的相关内容，包括基本用法、指令钩子函数、传参以及全局和局部自定义指令的使用。

基本用法

自定义指令可以在组件内部局部注册，也可以在应用实例中全局注册。指令名通常采用 kebab-case（短横线分隔）的命名方式。

局部自定义指令

在组件内部使用 directives 选项来注册局部自定义指令。

<template>
  <input v-focus />
</template>

<script setup>
// 局部自定义指令
const vFocus = {
  // 指令钩子函数，在元素挂载后执行
  mounted(el) {
    // 让元素获取焦点
    el.focus()
  }
}
</script>

在上述代码中，定义了一个名为 v-focus 的局部自定义指令，当绑定该指令的元素挂载到 DOM 后，会自动获取焦点。

全局自定义指令

在应用实例中使用 app.directive 方法来注册全局自定义指令，这样在整个应用中都可以使用该指令。

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

const app = createApp(App)

// 全局自定义指令
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

app.mount('#app')

在 main.js 中注册了全局的 v-focus 指令，之后在任何组件中都能使用该指令。

指令钩子函数

自定义指令有多个钩子函数，用于在不同阶段执行操作。以下是各个钩子函数及其执行时机：

beforeMount：在元素挂载到 DOM 之前调用。
mounted：在元素挂载到 DOM 之后调用。
beforeUpdate：在元素更新之前调用，发生在虚拟 DOM 打补丁之前。
updated：在元素更新之后调用，发生在虚拟 DOM 打补丁之后。
beforeUnmount：在元素卸载之前调用。
unmounted：在元素卸载之后调用。

<template>
  <div v-color='red'>This is a colored div.</div>
</template>

<script setup>
const vColor = {
  beforeMount(el, binding) {
    // 在元素挂载前设置样式
    el.style.color = binding.value
  },
  mounted(el) {
    console.log('Element is mounted.')
  },
  beforeUpdate() {
    console.log('Element is about to update.')
  },
  updated() {
    console.log('Element has been updated.')
  },
  beforeUnmount() {
    console.log('Element is about to unmount.')
  },
  unmounted() {
    console.log('Element has been unmounted.')
  }
}
</script>

在这个例子中，v-color 指令在不同的生命周期阶段执行相应的操作，并且通过 binding.value 获取指令传递的参数。

指令传参

指令可以接收参数，参数通过指令绑定表达式传递，在钩子函数中可以通过 binding 对象获取。

<template>
  <div v-color='blue' v-size=24>Styled div</div>
</template>

<script setup>
const vColor = {
  mounted(el, binding) {
    el.style.color = binding.value
  }
}

const vSize = {
  mounted(el, binding) {
    el.style.fontSize = `${binding.value}px`
  }
}
</script>

在上述代码中，v-color 指令接收一个颜色值作为参数，v-size 指令接收一个字体大小值作为参数，在 mounted 钩子函数中使用 binding.value 获取这些参数并应用到元素上。

动态指令参数

指令的参数可以是动态的，通过在模板中使用 JavaScript 表达式来实现。

<template>
  <div :[dynamicDirective]=dynamicValue>Dynamic directive</div>
</template>

<script setup>
import { ref } from 'vue'

const dynamicDirective = ref('color')
const dynamicValue = ref('green')

const vColor = {
  mounted(el, binding) {
    el.style.color = binding.value
  }
}
</script>

这里 dynamicDirective 和 dynamicValue 都是响应式的，当它们的值发生变化时，指令会相应地更新。

通过上述方法，你可以在 Vue 3 中灵活地创建和使用自定义指令，满足各种复杂的交互和功能需求。