Vueカスタムv-has命令、ボタン権限判定の手順

<入力vフォーカス>

// グローバルカスタムディレクティブ `v-focus` を登録します
Vue.directive('focus', {
  // バインドされた要素が DOM に挿入されると...
  挿入: 関数 (el) {
    // 要素にフォーカス el.focus()
  }
})

// ローカル ディレクティブを登録する場合、コンポーネントはディレクティブ オプションも受け入れます。
ディレクティブ: {
  集中：
    // 挿入された命令の定義: function (el) {
      el.フォーカス()
    }
  }
}

[
    {
        "チェック済み":false,
        "成分"：""、
        "作成時間":"2019-06-29 18:21:06",
        "createUser":"026a564bbfd84861ac4b65393644beef",
        "アイコン"：""、
        "id":"1503273153861066776",
        "name":"本日のコレクション（事件ファイル）",
        "開く":"true",
        "親ID":"2328050996633395469",
        "親名":"ホーム",
        "権限":"sys:index:vol",
        "ソート":103,
        "ステータス":"0",
        "タイプ":"2",
        "更新時間":"2021-01-27 15:51:15",
        "updateUser":"026a564bbfd84861ac4b65393644ビーフ",
        「URL」:""
    }
]

定数hasPermission = {
    インストール (Vue, オプション) {
        Vue.directive('has', {
            挿入: (el, バインディング, vnode)=>{
                filterGlobalPermission(el、バインディング、vnode);
            }
        });
    }
};
/**
 * グローバル権限制御 */
エクスポートconst filterGlobalPermission = (el, バインディング, vnode) => {
    permissionList を [] にします。
    authList を JSON.parse(localStorage.getItem('LOGIN_USER_BUTTON_AUTH') || "[]" とします。
    for (let auth of authList) {
        権限リストをプッシュします(認証);
    }
    パーミッションリストの長さが等しい場合
        el.parentNode.removeChild(el);
        戻る;
    }
    権限を [] にします。
    for (let の permissionList の項目) {
        権限をプッシュします(item.permission);
    }
    if (!permissions.includes(binding.value)) {
        el.parentNode.removeChild(el);
    }
}
デフォルトの hasPermission をエクスポートします。

'./hasPermission' から hasPermission をインポートします。
エクスポート {hasPermission}

'@/utils' から {hasPermission} をインポートします
Vue.use(hasPermission)

<el-button v-has="'sys:arch:add'" type="primary" size="mini" icon="el-icon-plus" @click="add('1')">
    追加</el-button>