背景要件: ERP システムに「ボタン権限制御」機能を追加する必要があり、権限の制御粒度をボタン レベルまで拡張する必要があります。 期待されるボタンの権限制御には、「非表示」と「表示されるがクリックできない」の 2 つの対話型モードがあります。 見えない非表示のインタラクション方法は比較的簡単です。v-if を使用して、表示するかどうかを制御できます。 v-show を使用することもできますが、安全性が十分ではありません。結局のところ、v-show はスタイルを display: none に変更するだけで、実際の DOM レンダリングには依然として存在するため、非表示を制御するには v-if を使用することをお勧めします。 表示されているがクリックできない「見えるけど、見えない。」
最終的な製品要件では、「表示されるがクリックできない」が選択されましたが、これはおそらく、非表示では単純すぎると考えられたためでしょう。 (¬_¬) アイデアの探索
練習計画最終的に、既存のビジネス コード ロジックの変更を避けながら、コストを最小限に抑えて拡張できる指示方法を選択しました。
具体的な実施計画については以下をご覧ください。 権限エントリ: Vuex コントロール、グローバル使用//ユーザーがログインしたら、ユーザーの権限CODEコードを取得し、ストアに保存します this.$store.commit('SET_AUTH_CODE', authCodeList); SET_AUTH_CODE: (状態、acthCode) => { if (acthコード) { 状態.autoCodeList = acthCode; } ストアを設定する({ 名前: 'autoCodeList', コンテンツ: state.autoCodeList || [], }); } 権限指示の定義constdisableClickFn = (イベント) => { イベント && event.stopImmediatePropagation(); } エクスポートconsthasPermission = () => { Vue.directive('permission', { bind(el, バインディング) { 無効化 = true にします。 autoCodeList.length と autoCodeList.includes(binding.value) の場合 { 無効 = false; } (無効)の場合{ el.classList.add('権限が無効'); el.setAttribute('無効', '無効'); el.addEventListener('click', disabledClickFn, true); } }, アンバインド(el) { el.removeEventListener('click'、disableClickFn); } }); };
同じ要素の同じイベント タイプに複数のイベント リスナーがアタッチされている場合、イベントがトリガーされたときに追加された順序でイベント リスナーが呼び出されます。いずれかのイベント リスナーで stopImmediatePropagation() を呼び出すと、残りのイベント リスナーは呼び出されません。 MSDN - stopImmediatePropagation 無効なCSSスタイルを追加する.権限が無効{ 位置: 相対的; カーソル: 許可されていません !important; point-events: none; // 要素がマウスイベントを受け取らないようにします border:none; 背景画像: なし; &::後 { コンテンツ: ''; 位置: 絶対; 下部: 0; 左: 0px; 右: 0px; 高さ: 100%; zインデックス: 9; 背景: rgba(255, 255, 255, 0.5); } } ここでは、比較的馴染みのない CSS プロパティである、pointer-events が使用されています。 CSS3 のポインター イベント プロパティは、特定のグラフィック要素がどのような状況で (ある場合) マウス イベントのターゲットになることができるかを指定します。 詳しい使用方法については、MSDN - ポインター イベントを参照してください。 ここでのポインター イベントの使用は、補助的な機能にすぎません。必ずしも、要素のイベント リスナーがトリガーされないことを意味するわけではありません。子孫要素にポインター イベントが指定されていて、イベント ターゲットになることが許可されている場合は、親要素のイベントをトリガーできます。また、クリックしないように制御するために CSS プロパティのみに依存するのは依然としてリスクがあるため、ここでは補助的な目的でのみ使用されます。 グローバル「権限判定」ツール機能'@/util/store' から getStore をインポートします。 const autoCodeList = getStore({ name: 'autoCodeList', }) || []; エクスポート関数hasPermission(authName) { 戻り値 !(autoCodeList.length > 0 && autoCodeList.includes(authName)); } 特定の用途// コマンドメソッド (ここでの oms/order/save は、ユーザーがログインするときの CODE 権限コードに対応します) <el-button v-permission="'oms:order:save'">保存</el-button> // 関数メソッド <el-button :disabled="hasPermission('oms:order:save')"></el-button> Vue ベースの要素ボタン権限の実装に関するこの記事はこれで終わりです。より関連性の高い要素ボタン権限については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 権限の問題によりMySQLの設定ファイルmy.cnfを起動できない問題の解決方法
>>: MySQL マスタースレーブレプリケーションの読み書き分離構造の詳細な説明
目次序文APPメソッドにジャンプURLスキームメタタグユニバーサルリンクさまざまな使い方URLスキー...
概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...
テーブル:reward(報酬テーブル)があるとします。テーブル構造は次のようになります。 テーブルt...
目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...
序文: MySQL で最も一般的に使用されるアーキテクチャは、マスター スレーブ レプリケーションで...
私はずっとキャッシュについて学びたいと思っていました。結局のところ、キャッシュはフロントエンドのパフ...
この記事ではJavaScript検索のデータ表示コードを参考までに共有します。具体的な内容は以下のと...
1. 複数列レイアウトではなく、単一列レイアウトを使用する1 列のレイアウトにより、全体的な状況をよ...
使用法: date [オプション]... [+フォーマット]または: date [-u|--utc|...
Docker コンテナは、起動時に、たとえば ssh または apache デーモン サービスなどの...
使用 <div id="アプリ"> <router-link ...
js 実行字句解析フェーズ: 形式パラメータ解析、変数宣言解析、関数宣言解析の 3 つの部分が含まれ...
BMP は、ハードウェア デバイスに依存せず、広く使用されている画像ファイル形式です。ビットマップ保...
1. 事件の背景:仕事上、Ubuntu への vscode リモート接続を使用する必要があります。 ...
背景データ ウェアハウス モデリングでは、何ら処理されていない元のビジネス レイヤー データは OD...