vue3封装一个指令实现权限按钮

vue3封装一个指令实现权限按钮

模式1：数组模式-可支持多个权限一起控制按钮展示与隐藏

1-1 directives / index.ts

export * from './permission'

1-2 directives / permission.ts

// 引入vue中定义的指令对应的类型定义
import type {
    Directive } from 'vue'
export const permission: Directive = {
   
  // mounted是指令的一个生命周期
  mounted(el, binding) {
   
    // value 获取用户使用自定义指令绑定的内容
    const {
    value } = binding
    // 获取用户所有的权限按钮
    const permissionBtn:any = sessionStorage.getItem('permission')
    // 判断用户使用自定义指令，是否使用正确了
    if (value && value instanceof Array && value.length > 0) {
   
      const permissionFunc = value
      //判断传递进来的按钮权限，用户是否拥有
      let arr = JSON.parse(permissionBtn)
      const hasPermission = arr.some((role: any) => {
   
        return permissionFunc.includes(role)
      })

       // 当用户没有这个按钮权限时，设置隐藏这个按钮
      if (!hasPermission) {
   
        el.style.display = 'none'
      }
    } else {
   
      throw new Error('need roles! Like v-permission="[\'admin\',\'editor\']"')
    }
  }
}

1-3 main.ts

import {
    createApp } from 'vue'
import type {
    Directive } from "vue"

// 挂载全局指令
import * as directives from<