vue 实现全局指令
Vue 全局指令的实现方法
全局指令在 Vue 中用于在多个组件中复用 DOM 操作逻辑。以下是实现全局指令的步骤：
注册全局指令
在 Vue 应用的入口文件（如 main.js）中，使用 Vue.directive 方法注册全局指令：
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})指令钩子函数
Vue 指令提供多个生命周期钩子，常用钩子如下：
bind：指令第一次绑定到元素时调用inserted：被绑定元素插入父节点时调用update：所在组件 VNode 更新时调用componentUpdated：所在组件及子组件 VNode 更新后调用unbind：指令与元素解绑时调用
带参数的全局指令
可以创建接收参数的指令：
Vue.directive('color', {
bind: function(el, binding) {
el.style.color = binding.value
}
})在模板中使用：
<p v-color="'red'">红色文字</p>动态参数指令
支持动态指令参数：
Vue.directive('pin', {
bind: function(el, binding) {
el.style.position = 'fixed'
const s = binding.arg || 'top'
el.style[s] = binding.value + 'px'
}
})模板中使用：
<p v-pin:bottom="200">固定在底部200px处</p>对象字面量指令
可以传递对象作为指令值：
Vue.directive('demo', {
bind: function(el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
}
})模板中使用：
<div v-demo="{ color: 'white', text: 'hello!' }"></div>全局指令的最佳实践
- 保持指令功能单一
- 避免在指令中进行复杂的业务逻辑
- 考虑指令的性能影响
- 为指令添加清晰的注释说明
通过以上方法可以有效地在 Vue 应用中创建和使用全局指令，实现跨组件的 DOM 操作逻辑复用。
