Vue ベースの要素ボタン権限実装ソリューション

Vue ベースの要素ボタン権限実装ソリューション

背景要件: ERP システムに「ボタン権限制御」機能を追加する必要があり、権限の制御粒度をボタン レベルまで拡張する必要があります。

期待される

ボタンの権限制御には、「非表示」と「表示されるがクリックできない」の 2 つの対話型モードがあります。

見えない

非表示のインタラクション方法は比較的簡単です。v-if を使用して、表示するかどうかを制御できます。 v-show を使用することもできますが、安全性が十分ではありません。結局のところ、v-show はスタイルを display: none に変更するだけで、実際の DOM レンダリングには依然として存在するため、非表示を制御するには v-if を使用することをお勧めします。

表示されているがクリックできない

「見えるけど、見えない。」

  • スタイル コントロール (無効なスタイルを追加する必要があります)、たとえば、カーソル: 許可しない、グレー表示など。
  • クリックできない、つまりクリック イベントを無効にしたりブロックしたりするには、preventDefault/stopProgration でこれを実現できるようです。

最終的な製品要件では、「表示されるがクリックできない」が選択されましたが、これはおそらく、非表示では単純すぎると考えられたためでしょう。 (¬_¬)

アイデアの探索

  • ボタン クリック イベントのコールバック関数にラッパー関数を追加して、その権限を制御し、イベントをインターセプトしてトリガーします。これは、高階コンポーネントに少し似たプロキシを作成するようなものです (ただし、既存のビジネスが大きく変更され、各 @click バインディング関数を 1 つずつ変更する必要があるため、このソリューションは放棄されます)。
  • ボタンクリックイベントがバブリングしてトリガーされるのを防ぐには、preventDefautl/stopProgration を使用できるようです。イベントは、命令の形式で DOM 要素上で監視できるようです。許可されている場合はイベントが正常に実行され、そうでない場合はブロックされます。

練習計画

最終的に、既存のビジネス コード ロジックの変更を避けながら、コストを最小限に抑えて拡張できる指示方法を選択しました。
権限制御のためにクリックハイジャックが必要な要素:

  • エルボタン
  • btn-wrapper (自己カプセル化コンポーネント)
  • div/span/aなどのタグ

具体的な実施計画については以下をご覧ください。

権限エントリ: 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);
    }
  });
};

  • まず、キャプチャ フェーズ中にトリガーするために addEventListener の 3 番目のパラメーターで useCapture を true として使用します。そのため、ここでのイベント リスナーは @click よりも優先され、コールバックがトリガーされます。
  • 次に、stopImmediatePropagation は、イベントのバブリングと同じイベントの他のリスナーのトリガーを防ぐために使用されます。

同じ要素の同じイベント タイプに複数のイベント リスナーがアタッチされている場合、イベントがトリガーされたときに追加された順序でイベント リスナーが呼び出されます。いずれかのイベント リスナーで 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue+elementUI コンポーネントは、折りたたみ可能な動的レンダリングのマルチレベル サイドバー ナビゲーションを再帰的に実装します。
  • プレーヤー機能を実現するためのvue + element uiのサンプルコード
  • Vue要素のバックグラウンド認証プロセスの分析
  • Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します
  • 要素 DateTimePicker+vue ポップアップボックスに時間のみが表示される問題を解決する
  • VueはElementUIのフォームサンプルコードを模倣する
  • Vueを使用してツリーコンポーネントを実装する例
  • ツリーコントロールを使用した Vue+iview の具体的な使用法
  • Vue での編集可能なツリー テーブルの実装コード
  • Vue Element フロントエンドアプリケーション開発ツリーリストコンポーネント

<<:  権限の問題によりMySQLの設定ファイルmy.cnfを起動できない問題の解決方法

>>:  MySQL マスタースレーブレプリケーションの読み書き分離構造の詳細な説明

推薦する

CSS3を使用してプログレスバー効果を実現し、動的にパーセンテージを追加する

プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...

Windows Server 2012 でファイル サーバーを構築するための詳細な手順

ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...

実用的な情報が満載のJavaScript Webフォーム機能通信

1. はじめに先ほど、フロントエンドの表示の問題について説明しました。では、前のコンテンツに戻って、...

Vue は無限ロードウォーターフォールフローを実装します

この記事では、参考までに、無限ロードウォーターフォールフローを実現するためのVueの具体的なコードを...

Tomcat をサービスとして登録する際に注意すべき点のまとめ

Tomcat をサービスとして登録する場合の注意点は次のとおりです。 インターフェースを開いたら、以...

Django+mysql の設定と簡単な操作データベースのサンプルコード

ステップ1: MySQLドライバをダウンロードするcmdは作成されたDjangoプロジェクトディレク...

React+Antdはテーブルの追加、削除、変更の例を実装します

目次テーブル/index.jsテーブル/モデル/index.jsテーブル/モデル/モジュール/bas...

CSS3+JavaScript を使用したクールな呼吸効果のサンプル コード

CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...

Linux lsof コマンドの使用方法の詳細な説明

lsof (開いているファイルのリスト) は、プロセスによって開かれたファイルを表示するツールです。...

CSSスタイルシートとフォーマットレイアウトの詳細な説明

スタイルシートCSS (カスケーディング スタイル シート) は、HTML Web ページを美しくす...

ウェブサイトに最も必要なのは、ターゲットユーザーグループのエクスペリエンスを向上させることです。

「大河は東に流れ、波は歴代の英雄たちを洗い流した。古城の西側は三国時代の周朗の赤壁だと言われている...

床スクロール効果を実現する js

この記事ではjQueryを使用して、階段のスライド効果を実装し、フロアをスクロールし、フロアボタンを...

設計仕様に準拠した設計は良い設計でしょうか?

これまでの数年間、私はいわゆる「設計仕様」についてかなりの数の執筆やコンサルティングを行ってきました...

Ubuntu 20.04 ファイアウォール設定の簡単なチュートリアル (初心者)

序文ますます便利になった今日のインターネット社会では、さまざまなインターネット ランサムウェア ウイ...

Vueページジャンプの実装方法

1. this.$router.push() 1. ビュー <テンプレート> <d...