Vue3 添加按钮权限自定义指令

1 需求

根据 不同的 权限展示或隐藏新增编辑的按钮

2 实现

使用自定义指令来控制按钮，当有权限是就显示按钮，没有就移除元素

3 代码实现过程

3.1 创建指定要权限按钮控制文件 src/directives/permission.ts 

/**
 * 按钮权限自定义指令
 * permission
 */
export const vPermission = {
  // el 指定元素的 dom binding.value 传递给指令的值
  mounted(el: HTMLElement, binding: { value: any }) {
    const { value } = binding

    // 从登录获取到的用户权限 ，是个数组 (目前是写死的数据，根据自己存储方式获取 vuex/pinia
    const permissionArray = ['admin:user:add', 'admin:user:edit', 'admin:user:delete']
    // 超级管理员
    const all_permission = '*:*:*'
    if (permissionArray[0] === all_permission) return

    // 判断使用自定义指令是否正确
    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value
      // 查找是否有这个权限
      const hasPrermission = permissionArray.some((item) => {
        return permissionFlag.includes(item)
      })

      // 如果没有找到，就隐藏元素
      if (!hasPrermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}

3.2 创建统一导出自定义指令文件 src/directives/index.ts

import type { App } from 'vue'

import { vPermission } from './permission'

export default function installDirective(app: App) {
  // 按钮权限指令
  app.directive('permission', vPermission)
}

3.3 main.ts 中使用

// 自定义指令的全局注册
import directives from '@/directives'
// 自定义指令的全局注册
app.use(directives)

3.4 在页面中使用

<button v-permission="[admin:user:add]">新增</button >