通过自定义指令实现按钮权限

1.封装自定义指令，把权限按钮信息保存到store,获取权限列表，以及什么环境开启按钮权限

 

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

const action = Vue.directive('action', {
  inserted: async function (el, binding) {
    const actionName = binding.value;
    const xn = actionName.lastIndexOf('-column');
    let pName = '';
    if(xn !== -1) {
      pName = actionName.substring(0, xn);
    } else {
      pName = actionName;
    }
    // 获取操作权限列表
    const { btnPermissions } = store.state.user;
  
    if (btnPermissions && !btnPermissions.includes(pName)) {
      // 除dev环境外 其余环境开启按钮权限
      if (['sit', 'production', 'dev'].includes(process.env.VUE_APP_ENV)) {
        if(xn != -1) {
          el.style.pointerEvents = 'none';
          el.style.color = 'inherit';
        } else {
          (el.parentNode && el.parentNode.removeChild(el)) || (el.style.display = 'none');
        }
        
      }
    }
    // })
  },
});

export default action;

2.在项目里面使用指令:v-action="'参数'"，参数传到封装的指令里面，通过vuex里面数据判断是否存在该参数，如果存在则按钮显示，不存在则隐藏

<button v-action="'manageBtn'"  type="secondary" @click="batchChange"> 变更人员 <button>
                <button v-action="'mange.plan.change'" :disabled="selectList.length === 0" type="secondary" @click="batchPlanChange"> 批量变更 <button>