vue项目中按钮权限控制之自定义指令

vue项目中，有的情况下，你需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
这里我们自定义一个按钮权限控制的指令

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

/**权限指令**/
Vue.directive('has', {
  bind: function (el, binding) {
    if (!Vue.prototype.$_has(binding.value)) {
      // el.parentNode.removeChild(el);
      el.style.display = 'none';
    }
  }
});
//权限检查方法
Vue.prototype.$_has = function (value) {
  let isExist = false;
  let buttonperms = store.state.user_info.btns
  // 权限列表
  for (let i = 0; i < buttonperms.length; i++) {
    if (buttonperms[i].indexOf(value) > -1) {
      isExist = true;
      break;
    }
  }
  return isExist;
};

然后在全局引入
用的时候在按钮上添加v-has属性，并添加属性值（已经定义好的权限标识），与返回权限标识做比较即可。