vue全局指令实现
Vue 全局指令的实现
在 Vue 中，全局指令可以通过 Vue.directive() 方法注册，这些指令可以在任何组件的模板中使用。
注册全局指令
全局指令需要在 Vue 应用初始化之前注册，通常在 main.js 或单独的文件中定义。
import { createApp } from 'vue'
const app = createApp({})
// 注册全局指令
app.directive('focus', {
mounted(el) {
el.focus()
}
})
app.mount('#app')指令钩子函数
Vue 3 中的指令包含以下生命周期钩子：
created：元素属性或事件监听器应用之前调用。beforeMount：指令首次绑定到元素时调用。mounted：元素插入父 DOM 时调用。beforeUpdate：在元素更新前调用。updated：在元素及其子组件更新后调用。beforeUnmount：在元素卸载前调用。unmounted：在元素卸载后调用。
示例：实现一个 v-highlight 指令
以下是一个全局指令的示例，用于高亮元素背景色。
app.directive('highlight', {
mounted(el, binding) {
el.style.backgroundColor = binding.value || 'yellow'
},
updated(el, binding) {
el.style.backgroundColor = binding.value || 'yellow'
}
})在模板中使用：
<p v-highlight="'lightblue'">这段文字背景会被高亮</p>指令参数和修饰符
指令可以接收参数和修饰符：
app.directive('pin', {
mounted(el, binding) {
el.style.position = 'fixed'
const s = binding.arg || 'top'
el.style[s] = binding.value + 'px'
}
})使用示例：
<p v-pin:bottom="50">固定在距离底部 50px 的位置</p>动态指令参数
指令参数可以是动态的：
<p v-pin:[direction]="50">动态参数示例</p>指令的简写形式
如果指令仅在 mounted 和 updated 时触发相同行为，可以使用简写形式：
app.directive('highlight', (el, binding) => {
el.style.backgroundColor = binding.value || 'yellow'
})注意事项
- 全局指令会作用于整个应用中的所有组件，应谨慎命名以避免冲突。
- 复杂的逻辑建议封装为组件而非指令。
- 指令主要用于 DOM 操作，避免在指令中处理复杂的业务逻辑。
通过以上方式，可以灵活地实现各种全局指令功能，增强 Vue 应用的交互能力。
