按钮权限--全局自定义指令写法

这里主要是写个自定义指令。首先获取用户的buttons，再用指令去判断是否使用。

 自定义全局指令：先src建个directive/has.ts，写入以下代码。

import pinia from '@/store'
import { useUserStore } from '@/store/modules/user'

let userStore = useUserStore(pinia)
console.log(userStore)

export function isHasButton(app: any) {
  // 全局的自定义指令
  app.directive('has', {
    // 代表全局自定义指令的DOM|组件挂载完毕之后会执行一次
    mounted(el: HTMLElement, binding: any) {
      // 没有的话就直接从dom树上移除
      if (!userStore.buttons.includes(binding.value)) {
        el.parentNode?.removeChild(el)
      }
    },
  })
}

然后在main.ts中引用

// 引入自定义指令
import { isHasButton } from './directive/has.ts'
...
const app = createApp(App) // 获取应用实例对象
...
// 自定义指令
isHasButton(app)

随后在.vue文件中，在对应的按钮添加这个指令即可

<!-- 添加品牌按钮 -->
      <el-button type="primary" size="default" icon="Plus" @click="addTrademark" v-has="'btn.Trademark.add'">
        添加品牌
      </el-button>