19.自定义指令的应用场景

28 阅读2分钟

概念

Vue除了提供了默认内置的指令外,还允许开发人员根据实际情况自定义指令,它的作用价值在于,在某些场景下需要对普通DOM元素进行操作的逻辑进行复用。

生命周期

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  • update:所在组件的 VNode 更新时调用。
  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind:只调用一次,指令与元素解绑时调用。

常见的指令

图片懒加载、长按、按钮权限、拖拽指令、鼠标操作等

按钮权限自定义指令

// permission.ts

// 引入vue中定义的指令对应的类型定义
import { Directive } from 'vue'
export const permission: Directive = {
  // mounted是指令的一个生命周期
  mounted(el, binding) {
    // value 获取用户使用自定义指令绑定的内容
    const { value } = binding
    // 获取用户所有的权限按钮
    const permissionBtn = sessionStorage.getItem('permission')
    // 判断用户使用自定义指令,是否使用正确了
    if (value && value instanceof Array && value.length > 0) {
      const permissionFunc = value
      //判断传递进来的按钮权限,用户是否拥有
      //Array.some(), 数组中有一个结果是true返回true,剩下的元素不会再检测
      const hasPermission = permissionBtn.some((role: any) => {
        return permissionFunc.includes(role)
      })
       // 当用户没有这个按钮权限时,设置隐藏这个按钮
      if (!hasPermission) {
        el.style.display = 'none'
      }
    } else {
      throw new Error('need roles! Like v-permission="[\'admin\',\'editor\']"')
    }
  }
}

// 注意,我们这里写的自定义指令,传递内容是一个数组,也就说,按钮权限可能是由
// 多个因素决定的,如果你的业务场景只由一个因素决定,自定义指令也可以不传递一个数组,
// 只传递一个字符串就可以了