vue 实现全局指令

全局指令的实现方法

在 Vue 中，全局指令可以通过 Vue.directive 方法进行注册。全局指令可以在任何组件中使用，无需在每个组件中单独引入。

注册全局指令的基本语法如下：

Vue.directive('directiveName', {
  bind(el, binding, vnode) {
    // 指令第一次绑定到元素时调用
  },
  inserted(el, binding, vnode) {
    // 被绑定元素插入父节点时调用
  },
  update(el, binding, vnode, oldVnode) {
    // 所在组件的 VNode 更新时调用
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    // 所在组件的 VNode 及其子 VNode 全部更新后调用
  },
  unbind(el, binding, vnode) {
    // 指令与元素解绑时调用
  }
})

示例：实现一个全局焦点指令

以下是一个实现全局自动聚焦指令的示例：

Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
})

在组件中使用：

<input v-focus>

示例：实现一个全局权限指令

实现一个根据权限显示或隐藏元素的指令：

Vue.directive('permission', {
  inserted: function(el, binding) {
    const permissions = ['admin', 'editor'] // 假设这是用户拥有的权限
    if (!permissions.includes(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

在组件中使用：

<button v-permission="'admin'">管理员按钮</button>

指令钩子函数的参数说明

每个指令钩子函数都会接收以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM
• binding：一个对象，包含以下属性：
  • name：指令名，不包括 v- 前缀
  • value：指令的绑定值
  • oldValue：指令绑定的前一个值
  • expression：字符串形式的指令表达式
  • arg：传给指令的参数
  • modifiers：一个包含修饰符的对象
• vnode：Vue 编译生成的虚拟节点
• oldVnode：上一个虚拟节点

动态指令参数

指令的参数可以是动态的：

<div v-demo:[direction]="200"></div>

Vue.directive('demo', {
  bind: function(el, binding) {
    el.style.position = 'fixed'
    const s = binding.arg === 'left' ? 'left' : 'top'
    el.style[s] = binding.value + 'px'
  }
})

函数简写

如果指令只需要在 bind 和 update 时触发相同行为，可以简写为一个函数：

Vue.directive('color', function(el, binding) {
  el.style.color = binding.value
})

注意事项

1. 全局指令应该在 Vue 实例创建之前注册
2. 指令名称应该避免与现有 HTML 属性冲突
3. 指令中的 DOM 操作应该谨慎，避免影响 Vue 的响应式系统
4. 复杂的逻辑建议放在组件中实现，指令适合处理简单的 DOM 操作