项目开发中，不同的部门、组织、人员，会有不同的功能权限

可以通过给按钮增加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 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。