vue2/vue3自定义指令：权限控制

vue2

src/directives/index.ts

import Vue from 'vue';
import store from '@/store';
export default function directive() {
    Vue.directive('auth', {
        inserted: (el, binding) => {
            if (!store.state.buttons.has(binding.value)) {
                el.remove();
            }
        }
    });
}

main.ts main中注册

import directive from './directives';
Vue.use(directive);

在vue文件中使用

 <el-button type="primary" @click.native="handleAllConfirm" v-auth="'basic:shift:editDetails'" size="small">{{ tt('提交') }}</el-button>

vue3

src/directives/index.ts 如下，其他如上

import { App } from "vue";
import { useStore } from "vuex";
import createStore from "@/store";
const list = createStore.state.buttons;

export default function directive(app: App) {
    app.directive("auth", {
        created: (el, binding) => {
            if (!list.has(binding.value)) {
                el.remove();
            }
        },
    });
}