背景要件: 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 マスタースレーブレプリケーションの読み書き分離構造の詳細な説明
プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...
ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...
1. はじめに先ほど、フロントエンドの表示の問題について説明しました。では、前のコンテンツに戻って、...
この記事では、参考までに、無限ロードウォーターフォールフローを実現するためのVueの具体的なコードを...
Tomcat をサービスとして登録する場合の注意点は次のとおりです。 インターフェースを開いたら、以...
ステップ1: MySQLドライバをダウンロードするcmdは作成されたDjangoプロジェクトディレク...
目次テーブル/index.jsテーブル/モデル/index.jsテーブル/モデル/モジュール/bas...
CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...
lsof (開いているファイルのリスト) は、プロセスによって開かれたファイルを表示するツールです。...
スタイルシートCSS (カスケーディング スタイル シート) は、HTML Web ページを美しくす...
「大河は東に流れ、波は歴代の英雄たちを洗い流した。古城の西側は三国時代の周朗の赤壁だと言われている...
この記事ではjQueryを使用して、階段のスライド効果を実装し、フロアをスクロールし、フロアボタンを...
これまでの数年間、私はいわゆる「設計仕様」についてかなりの数の執筆やコンサルティングを行ってきました...
序文ますます便利になった今日のインターネット社会では、さまざまなインターネット ランサムウェア ウイ...
1. this.$router.push() 1. ビュー <テンプレート> <d...