vue3.0 按钮权限的自定义指令

创建hasPermission.js

export default (Vue) => {
  /**自定义按钮权限指令 */
  Vue.directive('has', {
    mounted(el, binding) {
      console.log(el, binding)
      //获取按钮权限
      if (!Vue.config.globalProperties.$_has(binding.value)) {
        //移除不匹配的按钮
        el.parentNode.removeChild(el)
      }
    },
  })

  //检查权限方法
  Vue.config.globalProperties.$_has = function (value) {
    let isExist = false

    var btnPermsArr = ['user:add', 'user:edit', 'user:del'] //获取从服务器请求存储本地的按钮权限
    if (btnPermsArr.includes(value)) {
      isExist = true
    }
    return isExist
  }
}

引入到main.js中

import hasPermission from 'utils/hasPermission' //vite.config.js配置utils别名
const app = createApp(App)
app.use(router).use(store).use(antd).use(hasPermission)
app.mount('#app')

使用

<a-button type="primary" v-has="'user:add'">添加</a-button>