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

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

アプリケーションシナリオ

バックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があります。管理者が権限を設定した後、ユーザーがログインすると、インターフェイスからボタン権限リストが取得され、バックグラウンド データに基づいて表示するボタンが決定されます。

簡単に言えば、カスタム指示

Vue.js公式サイトのカスタム命令の説明

cn.vuejs.org/v2/guide/cu…

基本概念

コア関数のデフォルトの組み込み命令 (v-model および v-show) に加えて、Vue ではカスタム命令を登録することもできます。

Vue 2.0 では、コードの再利用と抽象化の主な形式はコンポーネントです。ただし、場合によっては、通常の DOM 要素に対して低レベルの操作を実行する必要があり、その場合はカスタム命令が使用されます。

たとえば、v-focusディレクティブをカスタマイズすると、ページが読み込まれると入力ボックスにフォーカスが当たります。

<入力vフォーカス>

グローバルカスタマイズ

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

ローカルカスタマイズ

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

フック機能

ディレクティブ定義オブジェクトは、次のフック関数を提供できます (すべてオプション)。

バインド

ディレクティブが最初に要素にバインドされるときに 1 回だけ呼び出されます。ここで、1 回限りの初期化セットアップを実行できます。

挿入された

バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードは存在することが保証されるだけで、必ずしもドキュメントに挿入されるわけではありません)

アップデート

コンポーネントの VNode が更新されたときに呼び出されますが、その子 VNode が更新される前に発生することもあります。命令の値は変更されている場合と変更されていない場合があります。ただし、更新前と更新後の値を比較することで、不要なテンプレートの更新を無視することができます。

コンポーネント更新

命令が配置されているコンポーネントの VNode とその子 VNode がすべて更新された後に呼び出されます。

解除する

ディレクティブが要素からアンバインドされたときに 1 回だけ呼び出されます。

他の

さらに、基本的な概念、フック関数パラメータ、動的命令パラメータなどもあります。

cn.vuejs.org/v2/guide/cu…

公式サイトにわかりやすく説明されているので、ここでは詳しくは説明しません。

原理

カスタム命令のソースコードに興味があるなら、それを非常にわかりやすく説明した記事もあります。

//www.jb51.net/article/209716.htm

原則は次のとおりです。

  • Vue の属性を解析するときは、各属性を走査します。
  • 命令情報を保存するには、オブジェクトにディレクティブ属性を追加します。
  • レンダリングが完了すると、ディレクティブ モジュールの create フック関数が実行されます。
  • Vueコンパイルによって生成された仮想ノード、つまりVNodeが親ノードに挿入された後に、
  • 各関数を順番に実行し、カスタム定義の挿入フック関数を実行します。

カスタムディレクティブ v-has

話題に戻りましょう。

今日は主にカスタム命令v-has、ボタン権限判定についてまとめます

ログインインターフェースはボタン権限リストを取得し、それをローカルキャッシュ LOGIN_USER_BUTTON_AUTH に保存します。

データ形式は次のとおりです。

[
    {
        "チェック済み":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」:""
    }
]

v-has ディレクティブの設定をカスタマイズする

utilsフォルダにhasPermission.jsファイルを作成し、index.jsに均一にエクスポートします。

定数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 をエクスポートします。

utils ファイルの下にある index.js

utilsフォルダ内の他のjsファイルもindex.jsにエクスポートできます。

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

main.js で導入

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

コンポーネントでv-hasを使用して、ボタンの権限に基づいてボタンを表示するかどうかを決定します。

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

上記は、Vueカスタムv-has命令とボタン権限判定の手順の詳細な内容です。Vueカスタムv-has命令の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vueカスタム命令とその使用方法の詳細な説明
  • ボタンの権限判定を実装するためのVueカスタムv-has命令
  • Vue 3 カスタムディレクティブ開発の概要
  • Vue3.0 カスタム命令(命令)知識の要約
  • 8つの非常に実用的なVueカスタム指示
  • Vueのカスタム命令の詳細な説明
  • 入力ボックスの入力値を制限する Vue カスタム ディレクティブの手順と完全なコード
  • Vueカスタム指示と動的ルーティングによる権限制御の実現
  • Vueカスタム命令によるメモリリーク問題を解決する
  • VUE がドラッグ指示をカスタマイズするときに、onmouseup イベントと click イベント間の競合を解決する
  • Vue の v-bind:style 効果のカスタム命令の詳細な説明
  • Vue 3.0 カスタムディレクティブの使い方

<<:  MySQL 5.7.20 圧縮版のダウンロードとインストールの簡単なチュートリアル

>>:  よくある Linux 英語エラーの中国語翻訳 (初心者必見)

推薦する

TypeScript の関数

目次1. 関数の定義1.1 JavaScript の関数1.2 TypeScriptの関数2. オプ...

React Nativeの起動プロセスの詳細分析

はじめに: この記事ではreact-native-cliで作成したサンプル プロジェクト (Andr...

WeChat アプレット wxss で外部 CSS ファイルとアイコンフォントを参照する方法

原因外部ファイルをミニプログラムにインポートする方法は次のとおりです: @import "...

Linux オペレーティング システムでよく使用される MySQL コマンドの概要

以下に、一般的な MySQL コマンドをいくつか示します。 -- データベース サービスを開始します...

WeChatアプレットはシンプルな計算機を実装する

WeChatアプレットの簡単な計算機は参考用です。具体的な内容は次のとおりです。 1. はじめに1....

Vue.jsはシンプルな折りたたみパネルを実装します

この記事では、Vue.jsの具体的なコードを共有して、シンプルな折りたたみパネルを実装する例を紹介し...

MySQL 8.0.20 Window10無料インストール版設定とNavicat管理チュートリアルグラフィック詳細説明

1. MySQL 8.0.20をダウンロードして解凍するダウンロードリンク: https://dev...

Webデザインチュートリアル(3):デザインの手順と考え方

<br />前のチュートリアル:Webデザインチュートリアル(2):模倣と盗作について。...

Vue3 における provide と inject の使用法と原則

序文:親コンポーネントと子コンポーネント間でデータを渡す場合、通常は props と emittin...

uniappを使用してWeChatミニプログラムでEChartsを使用する方法

今日は、uniapp を使用して Echarts を統合し、マップ チャートを表示します。 mpvu...

CSS 境界線の半分または部分的に表示される実装コード

1. 疑似クラスを使用して境界線の半分を表示する <!DOCTYPE html> <...

axiosリクエストをvueでカプセル化する方法

実際、Vueでaxiosをカプセル化するのは非常に簡単ですまず、srcパスにhttpフォルダを作成し...

MySQL の単一テーブル クエリ操作例の詳細な説明 [構文、制約、グループ化、集計、フィルタリング、並べ替えなど]

この記事では、MySQL の単一テーブル クエリ操作について説明します。ご参考までに、詳細は以下の通...

MySQL 5.7.21 履歴データディレクトリからデータを復元するチュートリアルの解凍バージョン

状況の説明: データベースが異常に起動およびシャットダウンしたため、サービスを再度起動したときに「起...

WeChatアプレットbindtapとcatchtapの違いの詳細な説明

目次1. イベントとは何ですか? 2. イベントの使い方3. バインドタップとキャッチタップの違い4...