我們通常給一個元素添加 v-if /v-show 來做權(quán)限管理，但如果判斷條件繁瑣且多個地方需要判斷，這種方式的代碼不僅不優(yōu)雅而且冗余。

• 針對這種情況，我們可以通過全局自定義指令來處理：我們先在新建個 array.js 文件，用于存放與權(quán)限相關(guān)的全局函數(shù)；

// array.js
export function checkArray (key) {
  let arr = ['1', '2', '3', '4', 'demo']
  let index = arr.indexOf(key)
  if (index > -1) {
    return true // 有權(quán)限
  } else {
    return false // 無權(quán)限
  }
}

• 然后在將 array 文件掛載到全局中

// main.js
import { checkArray } from "./common/array";
Vue.directive("permission", {
  inserted (el, binding) {
    let permission = binding.value; // 獲取到 v-permission的值
    if (permission) {
      let hasPermission = checkArray(permission);
      if (!hasPermission) { // 沒有權(quán)限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  }
});

• 最后我們在頁面中就可以通過自定義指令 v-permission 來判斷

 <div class="btns">
    <button v-permission="'1'">權(quán)限按鈕1</button>  // 會顯示
    <button v-permission="'10'">權(quán)限按鈕2</button>  // 無顯示
    <button v-permission="'demo'">權(quán)限按鈕3</button> // 會顯示
  </div>