この記事では、Element-uiを使用してvue.jsでナビゲーションメニューを実装するための具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 これを書いた理由は、この関数を書いたときに、要素は効果があるだけで、機能が実現されておらず、当時は戸惑ったからです。 まずは写真から まず、一般的な実装の考え方を説明します。そうしないと、次のコード スニペットがわかりにくくなります。円で囲まれた左と右の部分はコピーできる要素であり、右の部分はジャンプするサブコンポーネントです。 まず、ナビゲーションメニュー用のvueファイルを作成します。ただし、このファイルはコンポーネントをインポートするだけです。左右の部分を実装するためにContainerレイアウトコンテナを使用します。左側のel-asideタグにナビゲーションメニューのコンポーネントを配置し、右側のel-mainタグに<router-view></router-view>を記述してルートジャンプを実装します。 ナビゲーションメニューファイルにElnav.vueという名前を付けました <テンプレート> <div class="app"> <el-コンテナ> <余談> <navmenu></navmenu> </el-aside> <メイン> <ルータービュー></ルータービュー> </el-main> </el-コンテナ> </div> </テンプレート> <スクリプト> './navmenu' から navmenu をインポートします エクスポートデフォルト{ データ() { 戻る { } }, コンポーネント:{ ナビゲーションメニュー } } </スクリプト> <スタイルスコープ> </スタイル> 主にnavmenuコンポーネントを紹介します(navmenuコンポーネントは要素内のスタイルです) ナビゲーションメニュー default-active="$route.path"の設定とコンポーネントジャンプのインデックス値に注意してください(オプション1/2) <テンプレート> <div> <el-行> <エル-コル> <el-メニュー デフォルトアクティブ="$route.path" ルーター クラス="el-menu-vertical-demo" @open="ハンドルオープン" @close="ハンドルクローズ" > <el-サブメニューインデックス="1"> <テンプレートスロット="タイトル"> <i class="el-icon-location"></i> <span>ナビゲーション 1</span> </テンプレート> <el-メニュー項目グループ> <template slot="title">グループ 1</template> <el-menu-item index="/Elnav/one">オプション 1</el-menu-item> <el-menu-item index="/Elnav/two">オプション 2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="グループ 2"> <el-menu-item index="1-3">オプション 3</el-menu-item> </el-menu-item-group> <el-サブメニューインデックス="1-4"> <template slot="title">オプション 4</template> <el-menu-item index="1-4-1">オプション 1</el-menu-item> </el-サブメニュー> </el-サブメニュー> </el-menu> </el-col> </el-row> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ メソッド: { handleOpen(キー、キーパス) { console.log(キー、キーパス); }, handleClose(キー、キーパス) { console.log(キー、キーパス); } }, マウント() { console.log(this.$route); } }; </スクリプト> <スタイル> </スタイル> 次はルートの設定です { パス: "/Elnav", 名前:「エルナフ」 コンポーネント: () => インポート("../components/Elnav.vue")、 子供たち:[ { パス: "/Elnav/one", 名前: "1", コンポーネント: () => インポート("../components/one.vue") }, { パス: "/Elnav/two", 名前:「2」、 コンポーネント: () => インポート("../components/two.vue") } ] } 右側のone.vueやその他のvueファイルの内容については、自分で書いてください。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql の find_in_set 関数の基本的な使い方
まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...
画像タグ: <img> ページに画像を挿入するには、「src」属性を持つ「img」タグを...
この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...
サンバの概要Samba は、Linux および UNIX システム上で SMB プロトコルを実装する...
目次1. プロキシとは何ですか? 2. 使い方は? 1. プロキシを使用する簡単な例2. 対象オブジ...
Mysqlトランザクション操作の失敗を解決する方法トランザクションの原子性: トランザクションは、デ...
コードを見てみましょう:コードをコピーコードは次のとおりです。 < !DOCTYPE html...
この記事では、JavaScriptのランダムロールコールテーブルの具体的なコードを参考までに紹介しま...
目次setState は同期ですか、それとも非同期ですか?カスタム合成イベントと React フック...
前回の記事では、Dockerの基礎知識であるローカルディレクトリのマウント方法を紹介しました。今日は...
最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...
ここではCentOS7が使用されており、カーネルバージョンは [root@localhost ~]#...
目次1. はじめに2. 詳しい説明2.1、非同期2.1.1. 関数はPromise以外のオブジェクト...
この記事では、Vueでドラッグ可能なコンポーネントとドラッグ可能なコンポーネントを実装する方法を参考...
React の PC 版は Amap を使用するようにリファクタリングされました。情報を検索したと...