src/directives/index.ts
importVue from 'vue';importstore from '@/store';exportdefault function directive(){
Vue.directive('auth',{
inserted:(el, binding)=>{if(!store.state.buttons.has(binding.value)){
el.remove();}}});}
在main.ts中全局注册:
importdirective from './directives';
Vue.use(directive);
在vue文件中使用:
<el-button v-auth="'system:role:insert'">新增</el-button>
vue3
src/directives/index.ts
import{ App } from "vue";import{ useStore } from "vuex";importcreateStore from "@/store";const list = createStore.state.buttons;// 自定义指令,用于判断按钮权限exportdefault function directive(app: App){
app.directive("auth",{
created:(el, binding)=>{if(!list.has(binding.value)){
el.remove();}},});
app.directive("bgColor",{
beforeMount:(el, binding)=>{
el.style.backgroundColor = binding.value;},});}
其他如上。