vue中按钮级别的权限控制

可通过在自定义指令对象的钩子函数中实现
1.首先见一个.js文件，如图我建的has.js

export default{
//一个指令定义对象可以提供如的钩子函数、
    inserted(el,bindings,vnode){
        let boolean = bindings.value;
        //若值为fale，则移除元素
         !boolean &&el.parentNode.removeChild(el); 
    }
}

2.在store中存储控制按钮的数据

export default {
    namespaced: true, // 开启命名空间
    state: {
      buttonPermission:{
          edit:true,
          add:true,
          del:false,
      }
    },
   
  };

3.页面展示

<tempalye>
 <h1>按钮级别的权限控制</h1>
  <button v-has='buttonPermission.edit' >编辑</button>
    <button v-has='buttonPermission.add'  >新增</button>
    <button v-has='buttonPermission.del'>删除</button>
  </template>

import has from '../directive/has.js'
import {mapState} from 'vuex'
// 自定义一个has指令
 directives:{has},
  computed:{
    ...mapState("btn", ['buttonPermission']),
 },

效果如下：

修改权限制
export default {
    namespaced: true, // 开启命名空间
    state: {
      buttonPermission:{
          edit:true,
          add:true,
          del:true,
      }
    },
   
  };

效果如下：

关于自定义指令可查看：
vue官网