Vue3自定义指令

方法

export default (Vue) => {
    Vue.directive('auth', {
        mounted(el, binding) {
            let vm = binding.instance;
            let userAuthList = vm.$store.getters.authList;
            if (!Vue.config.globalProperties.$_has(binding.value, userAuthList)) {
                el.parentNode.removeChild(el)
            }
        },
    })
    Vue.config.globalProperties.$_has = (value, userAuthList) => {
        let isExist = false
        if (userAuthList.find(item => value.includes(item))) {
            isExist = true
        }
        return isExist
    }
}

main.ts

import { createApp } from "vue";
import direactive from '@/plugins/direactive.js';
app.use(direactive).mount("#app");

使用

<a-button v-auth="['D0detail']">查看明细</a-button>