Vue中按钮权限控制（项目是vue3工程）

1. 在src目录下，新建store文件夹，并在文件夹新建index.js

    import {createStore} from "vuex"  //vue3 方式

    export default createStore({
      state:{
        buttonPermission:{
          add:true,
          edit:false,
          delete:false
        }
      },
    })

2. 在src目录下，新建directives文件夹，并在文件夹新建has.js

    在has.js中，定义自定义指令对象
    export default {
       //vue3中是mounted
      mounted(el,binding,vnode) {
        let permissionValue = binding.value; //拿到指令对应绑定的值
        let boolean = vnode.dirs[0].instance._.vnode.component.appContext.provides.store.state.buttonPermission[permissionValue];
        // 从vuex中取值取反， 然后找父节点并移除当前的元素
        !boolean && el.parentNode.removeChild(el)
      },
      
      //在vue2中的写法是
      inserted(el.binding,vnode){
        let permissionValue = binding.value; //拿到指令对应绑定的值
        let boolean = vnode.context.$store.state.buttonPermission[permissionValue];
        // 从vuex中取值取反， 然后找父节点并移除当前的元素
        !boolean && el.parentNode.removeChild(el)
      }
    }

3.在App.vue中，定义三个按钮，并引入自定义指令文件，此时页面会根据vuex中buttonPermission对象中的值去显示对应的按钮

    <template>
      <div>
        <h1>Vue中按钮权限控制</h1>
        <input v-hasBtn="'add'" type="button" value="添加" />
        <input v-hasBtn="'edit'" type="button" value="编辑" />
        <input v-hasBtn="'delete'" type="button" value="删除" />
      </div>
    </template>

    <script>
        //引入自定义按钮权限指令
        import hasBtn from "../directives/has.js";
        export default {
          directives: {
            hasBtn,
          },
        };
    </script>