vue3自定义指令：按钮权限

一、创建指令文件 authDirective.ts

目录：/src/directives/authDirective.ts

// userStoreInfo.userPermissions=['权限标识1','权限标识2']
import { userStore } from '@/stores/userStore'  // pinia

// 自定义指令：按钮权限
export const AuthDirectives = {
  name: 'auths',
  mounted(el: any, binding: any) {
    // 用户的所有权限
    const userStoreInfo: any = userStore()
    const value = binding.value
    if (!value) {
      throw '指定要写入参数'
    }
    
    // 指令的参数是否存在( 有权限 ) 
    if (userStoreInfo.userPermissions.includes(value)) return

    // 指令的参数是否存在( 没有权限 )
    const parent = el.parentElement
    parent && parent.removeChild(el)
  }
}

二、注册到 main.ts

import { createApp } from 'vue'

import App from './App.vue'
import router from './router'

const app = createApp(App)

// 自定义指令：按钮权限 start -------------------------------
import { AuthDirectives } from '@/directives/authDirective'
app.directive(AuthDirectives.name, AuthDirectives)
// 自定义指令：按钮权限  end  -------------------------------

app.use(router)

app.mount('#app')

三、使用自定义指令

<el-button type="primary" v-auths="'system:user:add'">添加用户</el-button>