Vue按鈕權限

最近做項目，客戶要求做用戶-角色-按鈕權限，我是用自定義指令來實現的，代碼如下：

import Vue from 'vue'
/**權限指令**/
Vue.directive('has', {
  bind: function (el, binding) {
    debugger
    if (!Vue.prototype.$_has(binding.value)) {
      setTimeout(() => el.parentNode.removeChild(el))
      // if(el.parentNode!=null){
      //   setTimeout(() => console.log(el.parentNode))
      //   el.parentNode.removeChild(el);        
      // }
    }
  }
});
//權限檢查方法
Vue.prototype.$_has = function (value) {
  debugger
  let isExist = false;
  let buttonpermsStr = ['admin', 'inpurt'];
  if (buttonpermsStr == undefined || buttonpermsStr == null) {
    return false;
  }
  for (let i = 0; i < buttonpermsStr.length; i++) {
    if (value == buttonpermsStr[i]) {
      isExist = true;
      break;
    }
  }
  return isExist;
};

這裏的數據，我是用來測試的，項目的數據不便貼出。剛開始el.parentNode獲取不到，總是爲null，是因爲獲取時DOM還沒有加載，所以就放在了setTimeout裏。

將自定義代碼單獨放在js文件裏，然後在main.js中引用即可

import has from './assets/btnPermission.js'

然後直接在按鈕上使用;

<template>
  <div>
    <button class="btns" v-has="'admin1'">新增</button>
  </div>
</template>