[JavaScript知识库]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中全局注册：
import directive 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";
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();
            }
        },
    });
    app.directive("bgColor", {
        beforeMount: (el, binding) => {
            el.style.backgroundColor = binding.value;
        },
    });
}
其他如上。

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖