指令

• directives/permission.js

import store from "@/store";

export default {
    // el 是指令绑定的元素，bindings是入参
    mounted(el, bindings) {
        let allowRoleList = bindings.value;
        let userRole = store.state.role;
        // 无权限，则不加载
        if (allowRoleList.indexOf(userRole) === -1) {
            el.parentNode && el.parentNode.removeChild(el);
        }
    }
}

• directives/index.js

import permission from "./permission"
//批量注册指令(现在就一个permission)
const directives = {
    permission
}
//注册的一般写法，循环遍历directives，通过vue.directive注册
export default {
    install(Vue) {
        Object.keys(directives).forEach(key => {
            Vue.directive(key, directives[key])
        })
    }
}

• main.js

import directives from './directives'

const app = createApp(App);
app.config.productionTip = false;
app.use(store).use(router).use(Antd).use(directives).mount('#app')

• 使用

  <ul>
    <li v-permission="['admin','user']">btn1</li>
    <li v-permission="['admin']">btn2</li>
    <li v-permission="['user']">btn3</li>
    <li v-permission="[]">btn4</li>
  </ul>