vue3中如何设置按钮权限控制（如何注册自定义组件）

1：在src目录下创建 utiles>permission.ts

 

import store from '@/store'

export const hasRole = {

  install: (app:any) => {

    app.directive('hasRole', {

      mounted(el:any, binding:any) {

        // roles的值，应为string数组，存放角色列表  例子：['add','edit','del']

        // 也可以根据自己的逻辑修改

        const roles = store.getters.includes

        const value = binding.value

        let flag = value.filter((v:any)=>{

          return roles.indexOf(v)!=-1

        })

        if (flag.length<=0) {

          if (!el.parentNode) {

            el.style.display = 'none'

          } else {

            el.parentNode.removeChild(el)

          }

        }

      },

    })

  },

}

2：在全局main.js中注册

import {hasRole} from '@/utils/permission'
const app = createApp(App);

3：在页面中使用

  <button v-hasRole="['add']">按钮2</button>
  <button v-hasRole="['edit']">按钮3</button>
  <button v-hasRole="['del']">按钮4</button>