一、创建指令文件 authDirective.ts
目录:/src/directives/authDirective.ts
import { userStore } from '@/stores/userStore'
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)
import { AuthDirectives } from '@/directives/authDirective'
app.directive(AuthDirectives.name, AuthDirectives)
app.use(router)
app.mount('#app')
三、使用自定义指令
<el-button type="primary" v-auths="'system:user:add'">添加用户</el-button>