适用范围
自定义指令适合于那些不容易通过组件的 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 包起来。