Vue と Element-UI を使用してマルチレベルメニューナビゲーション機能を実装する方法-Vue.js-php.cn

Vue と Element-UI を使用してマルチレベルメニューナビゲーション機能を実装する方法

王林

リリース： 2023-07-22 16:33:14

オリジナル

2372 人が閲覧しました

Vue と Element-UI を使用してマルチレベルメニューナビゲーション機能を実装する方法

はじめに:
最新の Web アプリケーションの複雑さが増すにつれて、マルチレベルメニューナビゲーション機能は不可欠な部分になっています。 Vue は人気のある JavaScript フレームワークであり、そのシンプルさ、使いやすさ、柔軟性によりフロントエンド開発で広く使用されています。 Element-UI は、Vue に基づく UI コンポーネントライブラリのセットであり、豊富なコンポーネントとスタイルのセットを提供し、最新の Web インターフェイスの構築に適しています。この記事では、Vue と Element-UI を使用してマルチレベルメニューナビゲーション機能を実装する方法を紹介し、コード例を示します。

HTML 構造:
まず、HTML ファイル内に Vue アプリケーションをホストするコンテナ要素を作成する必要があります。次に、コンテナ内に <el-menu> コンポーネントを作成して、メニューナビゲーションを表示します。コード例は次のとおりです。

<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 サイトの他の関連記事を参照してください。