自定义指令directive 配置v-if or v-show权限显隐

    我们可以通过全局自定义指令来处理判断条件繁琐且多个地方需要判断（ v-if / v-show）。

    先在新建个 array.js 文件，用于存放与权限相关的全局函数；

array.js内容

export function checkArray(key) {

    let arr = ['1', '2', '3', '4', 'demo']

    let index = arr.indexOf(key)

    if (index > -1) {

        return true // 有权限

    } else {

        return false // 无权限

    }

}

main.js内容

import { checkArray } from './utils/array';

Vue.directive("permission", {

  inserted(el, binding) {

    let permission = binding.value; // 获取到 v-permission的值

    if (permission) {

      let hasPermission = checkArray(permission);

      if (!hasPermission) { // 没有权限 移除Dom元素

        el.parentNode && el.parentNode.removeChild(el);

      }

    }

  }

});

html内使用

<div class="btns">

      <button v-permission="'1'">权限按钮1</button> // 会显示

      <button v-permission="'10'">权限按钮2</button> // 无显示

      <button v-permission="'demo'">权限按钮3</button> // 会显示

    </div>