Vue3 自定义指令

适用范围

自定义指令适合于那些不容易通过组件的 props、events 或计算属性来实现的功能。

常见的使用场景

操作 DOM 元素

需要直接操作 DOM 元素的属性或样式时，例如：自动聚焦输入框、根据条件显示或隐藏元素、创建动画效果。

封装复用逻辑

处理事件

自定义指令可以用于监听和处理 DOM 事件，例如：实现点击外部区域关闭弹出框的功能、实现拖拽排序功能。

实现特殊的交互模式

例如滑动、缩放等。

动态改变样式和类名

根据条件动态改变元素的样式或类名。

使用

定义自定义指令

可以定义指令的生命周期钩子，比如 created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted 等。

举例

下面这个自定义指令的功能是自动聚焦使用该指令的输入框。

// focus.js

export default {
    mounted(el, binding) {
        // 获取el输入框类名的元素
        const tag = el.getElementsByClassName('el-input__inner')?.[0] || el.getElementsByClassName('el-textarea__inner')?.[0]
        tag.focus()

        console.log('binding.arg', binding.arg) // 获取参数名 isFocus
        console.log('binding.value', binding.value) // 获取参数值 true
    }
}

注册自定义指令

在 main.js 文件中，通过 app.directive 方法来注册。

// main.js

import focus from './focus' // 引入刚刚定义的 focus 文件

app.directive('focus', focus)

在自定义指令数量多的情况下，可以将所有自定义指令整合到一个文件，再引入到 main.js 中，看起来比较整洁，示例：

命名一个 directive.js 用于注册所有自定义指令。

// directive.js

import focus from './focus'
import move from './move'
import light from './light'
// ......

export default function directive(app) {
  app.directive('focus', focus)
  app.directive('move', move)
  app.directive('light', light)
  // ......
}

再把 directive.js 引入到 main.js 中。

// main.js

import directive from './directive'

const app = createApp(App)
directive(app)

使用自定义指令

<el-input v-focus v-model="number"></el-input>

<!-- 传参 -->
<el-input v-focus:isFocus="true" v-model="number"></el-input>

注意：使用指令节点需要有需要唯一根节点，没有则需要在外面套一层 div 或者 span 包起来。