按钮权限实现方法

1、自定义指令

// 注册一个全局自定义指令 `v-abc`
Vue.directive('abc', {
  bind: function (el) {
  // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  },
  inserted: function (el) {
  // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
  },
  update: function (el) {
  //所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较	  更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)
  },
  componentUpdated：functoin (el) {
  //指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  },
  unbind: function (el){
	//unbind  只调用一次，在指令与元素解绑时调用
	}
})

注册完全局指令后就可以在全局任何地方模板中使用v-abc指令

按钮权限实现：

1. 创建
   directive.js

import Vue from 'vue'
import store from '@/store'

//创建自定义指令
Vue.directive('abc', {
  bind: function (el, binding) {
    if (!Vue.prototype.$_abc(binding.value)) {
      el.style.display = 'none';
    }
  }
});
//通过自定义指令判断按钮权限
Vue.prototype.$_abc = function (value) {
  let isExist = false;
  let btn = btns;  //btns是后端接口请求到的所有按钮权限['a:b:update','a:b:add',......]
  if (btns.includes(value)) {
    isExist = true;
  }
  return isExist;
};

2. 引入
   main.js

import Vue from 'vue'
import '@/directive'

3.使用
在组件中给相关按钮加上自定义指令v-abc即实现根据权限显示按钮

 <el-button type="primary" v-abc="'a:b:add'">添加</el-button>

指令绑定的字段需要跟后端约定好规则，可以使用当前按钮所调用接口的名称。例如添加接口为/a/b/add,则添加按钮绑定a🅱️add