Vue小知识-常用指令(一)UI权限验证

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

我们都比较熟悉 Vue 的几个内置的指令: v-model/ v-if 和 v-show, Vue 还允许我们编写自定义指令, 比方说需要对 Dom 进行一些底层操作.

Vue 常用指令 - checkPermission

// 如下代码演示 注册一个全局下的自定义指令 v-focus

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……进行从操作
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  },
})

当然, 我们还可以在组件中编写注册局部指令, 通过 directives选项定义:

// myComponent.vue -->

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }

使用: 在模板中的元素上通过v-focus 使用.

实际项目开发中的例子: 权限验证 指令

指令定义代码:

import Vue from 'vue'
import doUntil from '../utils/do-until'
import checkUiPermission from '../utils/check-ui-permission'

const checkPermission = Vue.directive('permission', {
  bind: async function (el, binding, vnode, oldVnode) {
    const blockKey = binding.value || binding.expression.split('.')[1]
    if (!checkUiPermission(blockKey)) {
      doUntil(
        () => {
          if (el.parentNode) {
            el.parentNode.removeChild(el)
            return true
          }
        },
        (res) => res,
        10,
        80
      )
    }
  },
})

export default checkPermission

在模板中的元素上使用:

<template>
  <div>
    <button v-checkPermission>验证按钮是否有权限 对应UI显示什么内容/样式/与否</button>
  </div>
</template>

指令的 钩子函数

上面例子中只用到了一个 bind 勾子, 用来编写初始化设置; 另外还有 inserted update componentUpdated unbind

指令定义对象 提供的几个钩子函数 (均为可选)：

• 1. bind： 指令第一次绑定到元素时, 进行一次性的初始化设置. 只调用一次.
• 2. inserted：被绑定元素插入父节点时调用
• 3. update： 所在组件的 VNode 更新时调用
• 4. componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• 5. unbind：只调用一次，指令与元素解绑时调用。

参考 学习 总结

更详细用法请参考 Vue2.x 官方文档-自定义指令/Vue3.x 官方文档 再结合具体案例进行操作练手, 熟以致用!

另外 Vue3.x 官方迁移指南 也要多研究