アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があります。管理者が権限を設定した後、ユーザーがログインすると、インターフェイスからボタン権限リストが取得され、バックグラウンド データに基づいて表示するボタンが決定されます。 簡単に言えば、カスタム指示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 原則は次のとおりです。
カスタムディレクティブ 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.jsutilsフォルダ内の他の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の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.20 圧縮版のダウンロードとインストールの簡単なチュートリアル
>>: よくある Linux 英語エラーの中国語翻訳 (初心者必見)
序文ほとんどの人は、システム ディスク ストレージが少ないときにこの操作を実行するか、Linux シ...
プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...
変換して翻訳するTransform は、変換と変形を意味します。他の幅属性や高さ属性と同様に、CSS...
素敵なフリップログインと登録インターフェースを作成する序文最近、ネットワーク ディスクを構築しようと...
目次概要1. 関数デバウンス2. 機能スロットリング(スロットル)概要関数アンチシェイクと関数スロッ...
前面に書かれたfilter:blur と filter:contrast がこのような素晴らしい化学...
ant-design-vue テーブルのスケーラブルな列の問題に対する完璧なソリューション。固定列と...
1. WEBを理解するWeb ページは主にテキスト、画像、ハイパーリンクなどの要素で構成されていま...
この記事では、参考までに簡単なタイマーを実装するためのJavaScriptの具体的なコードを紹介しま...
1. 需要バックエンドは、フロントエンドがツリー構造(重複データなし)に変換するためのデータを提供し...
time(); 関数関数プロトタイプ: time_t time(time_t *timer)関数の目...
UPDATE はロックしますか?以下のような場合、SQL文はロックされますか? テーブル1を更新しま...
文字列を配列に分割するには、次の 3 つの MySQL 関数を使用する必要があります。 REVERS...
毎日の統計情報を取得するプロジェクトを実行する際、プロジェクト ログを分析する必要があります。要件の...
さらに、ブログ プログラムで構築された記事 Web サイトは常にブログのように見え、カスタマイズでき...