ホームページ > 記事 > ウェブフロントエンド > Vue と Element-UI を使用してマルチレベル メニュー ナビゲーション機能を実装する方法
Vue と Element-UI を使用してマルチレベル メニュー ナビゲーション機能を実装する方法
はじめに:
最新の Web アプリケーションの複雑さが増すにつれて、マルチレベル メニュー ナビゲーション機能は不可欠な部分になっています。 Vue は人気のある JavaScript フレームワークであり、そのシンプルさ、使いやすさ、柔軟性によりフロントエンド開発で広く使用されています。 Element-UI は、Vue に基づく UI コンポーネント ライブラリのセットであり、豊富なコンポーネントとスタイルのセットを提供し、最新の Web インターフェイスの構築に適しています。この記事では、Vue と Element-UI を使用してマルチレベル メニュー ナビゲーション機能を実装する方法を紹介し、コード例を示します。
HTML 構造:
まず、HTML ファイル内に Vue アプリケーションをホストするコンテナ要素を作成する必要があります。次に、コンテナ内に 0335875a31945e6c7d307ca638979f92
コンポーネントを作成して、メニュー ナビゲーションを表示します。コード例は次のとおりです。
<div id="app"> <el-menu :default-active="activeIndex" mode="horizontal" @select="handleMenuSelect"> <el-submenu index="1"> <template slot="title">一级菜单</template> <el-menu-item index="1-1">二级菜单-1</el-menu-item> <el-menu-item index="1-2">二级菜单-2</el-menu-item> </el-submenu> <el-submenu index="2"> <template slot="title">一级菜单</template> <el-menu-item index="2-1">二级菜单-1</el-menu-item> <el-menu-item index="2-2">二级菜单-2</el-menu-item> </el-submenu> </el-menu> </div>
Vue スクリプト:
次に、メニュー ナビゲーションの動作を制御する Vue スクリプトを作成する必要があります。まず、Vue と Element-UI をインポートし、Vue インスタンスを作成する必要があります。次に、インスタンスに data
属性を定義して、現在選択されているメニュー項目のインデックスを保存します。最後に、メニュー項目の選択イベントを処理するメソッド handleMenuSelect
をインスタンス内に定義します。コード サンプルは次のとおりです。
// 导入Vue和Element-UI import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 创建Vue实例 new Vue({ el: '#app', data: { activeIndex: '1-1' // 当前选中的菜单项的索引 }, methods: { handleMenuSelect(index) { console.log('选中了菜单项', index); this.activeIndex = index; // 更新当前选中的菜单项的索引 } } });
完全なサンプル コード:
以下は、Vue と Element-UI を使用してマルチレベル メニュー ナビゲーション機能を実装する完全なサンプル コードです:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多级菜单导航</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <el-menu :default-active="activeIndex" mode="horizontal" @select="handleMenuSelect"> <el-submenu index="1"> <template slot="title">一级菜单</template> <el-menu-item index="1-1">二级菜单-1</el-menu-item> <el-menu-item index="1-2">二级菜单-2</el-menu-item> </el-submenu> <el-submenu index="2"> <template slot="title">一级菜单</template> <el-menu-item index="2-1">二级菜单-1</el-menu-item> <el-menu-item index="2-2">二级菜单-2</el-menu-item> </el-submenu> </el-menu> </div> <script> // 创建Vue实例 new Vue({ el: '#app', data: { activeIndex: '1-1' // 当前选中的菜单项的索引 }, methods: { handleMenuSelect(index) { console.log('选中了菜单项', index); this.activeIndex = index; // 更新当前选中的菜单项的索引 } } }); </script> </body> </html>
概要:
Vue と Element-UI を使用すると、マルチレベルのメニュー ナビゲーション機能を簡単に実装できます。この記事では、HTML 構造と Vue スクリプトを使用してこれを実装する方法を説明し、完全なサンプル コードを提供します。この記事が、マルチレベル メニュー ナビゲーション機能の理解と応用に役立つことを願っています。
以上がVue と Element-UI を使用してマルチレベル メニュー ナビゲーション機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。