项目开发中，不同的部门、组织、人员，会有不同的功能权限
可以通过给按钮增加v-if 判断按钮是否显示，不过，这种方式需要在每个功能页面写代码逻辑。
我们可以通过给btn添加自定义指令的方式，进行统一处理
使用的时候可以通过下面的方式进行绑定
<el-button
@click="finishPlan()"
v-btnlimit="'productionCartonorder_finish'"
>完工</el-button>
那这个指令应该怎么写呢
思路是这样的：
第一步，项目加载时，把权限存起来
第二步，在自定义指令中，对相应的权限按钮进行处理
import Vue from 'vue';
import { sStorage } from '../utils/storage.js';
let type = function (o){
var s = Object.prototype.toString.call(o);
return s.match(/\[object (.*?)\]/)[1].toLowerCase();
};
Vue.directive('btnlimit', {
// 当被绑定的元素插入到 DOM 中时……
inserted: async (el, binding) => {
// el 当前绑定的元素 binding.value指令的绑定值
// console.log(Object.prototype.toString.call(binding.value))
let permissionList = sStorage.get('permission_button') || [];
if(sessionStorage.pattern === 'parent'){
permissionList=sStorage.get('moduleAuth');
}
//if (sessionStorage.pattern === 'children') {
// 判断一下是否包含这个元素，如果不包含的话，那就让他爸爸元素把子元素扔进垃圾堆
if (type(binding.value) === 'string' && !permissionList.includes(binding.value)) {
el.parentNode.removeChild(el)
}
if (type(binding.value) === 'array' && binding.value.length > 0) {
let minArr = binding.value.length > permissionList.length ? permissionList : binding.value;
let maxArr = binding.value.length > permissionList.length ? binding.value : permissionList;
// 求两者交集，无交集证明没有匹配数据
if (minArr.filter(v => maxArr.find(k => k == v)).length === 0) {
el.parentNode.removeChild(el)
}
}
//}
}
})
自定义指令的钩子可以用什么呢
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
