vue と Element-plus を使用してマルチレベルのメニューとナビゲーション バーを実装する方法

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

Vue は、ユーザー インターフェイスの構築に広く使用されている、非常に人気のある JavaScript フレームワークです。 Element Plus は、Vue に基づく UI ライブラリであり、ユーザー インターフェイスを簡単に作成するための豊富な UI コンポーネントのセットを提供します。この記事では、Vue と Element Plus を使用してマルチレベルのメニューとナビゲーション バーを実装し、ユーザーが Web サイトのさまざまなページを簡単に閲覧できるようにする方法を説明します。

まず、Vue プロジェクトを作成し、Element Plus をインストールする必要があります。 Vue のスキャフォールディング ツールを使用して、新しいプロジェクトを作成できます:

vue create vue-menu-navigation
cd vue-menu-navigation

Element Plus のインストール:

npm install element-plus --save

次に、マルチレベル メニューとナビゲーション バーを含むコンポーネントを作成する必要があります。この機能を実現するには、Element Plus が提供する Menu コンポーネントと Breadcrumb コンポーネントを使用できます。 Vue の単一ファイル コンポーネントでは、これらのコンポーネントを次のように使用できます:

<template>
  <div>
    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">首页</el-menu-item>
      <el-submenu index="2">
        <template #title>产品</template>
        <el-menu-item-group>
          <template #title>手机</template>
          <el-menu-item index="2-1">iPhone</el-menu-item>
          <el-menu-item index="2-2">华为</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template #title>电视</template>
          <el-menu-item index="2-3">小米</el-menu-item>
          <el-menu-item index="2-4">创维</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="3">关于</el-menu-item>
    </el-menu>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
        {{ item }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      breadcrumb: ['首页'],
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;

      switch (index) {
        case '1':
          this.breadcrumb = ['首页'];
          break;
        case '2-1':
          this.breadcrumb = ['产品', '手机', 'iPhone'];
          break;
        case '2-2':
          this.breadcrumb = ['产品', '手机', '华为'];
          break;
        case '2-3':
          this.breadcrumb = ['产品', '电视', '小米'];
          break;
        case '2-4':
          this.breadcrumb = ['产品', '电视', '创维'];
          break;
        case '3':
          this.breadcrumb = ['关于'];
          break;
      }
    },
  },
};
</script>

上記のコードでは、el-menu コンポーネントを使用して、el-menu-item コンポーネントで表されるマルチレベル メニューを作成します。メニュー項目。el-submenu コンポーネントは、サブメニューを含むメニュー項目を表します。ユーザーがメニュー項目を選択すると、activeIndex 変数の値が更新され、activeIndex の値に基づいてブレッドクラム バーの内容が更新されます。

Vue コンポーネントでは、data 属性を通じてデータを定義し、method 属性でメニュー選択イベントを処理するメソッドを定義できます。 handleSelect メソッドでは、選択されたメニュー項目のインデックス値に基づいて activeIndex とブレッドクラム データを更新します。

最後に、このコンポーネントを Vue インスタンスで使用します:

<template>
  <div>
    <navigation></navigation>
    <router-view></router-view>
  </div>
</template>

<script>
import Navigation from '@/components/Navigation.vue';
export default {
  components: {
    Navigation,
  },
};
</script>

Navigation コンポーネントを導入して使用することにより、マルチレベルのメニューとナビゲーション バーをアプリケーションに追加します。同時に、異なるページ間を移動するためのルータービューコンポーネントも追加しました。

これまでに、Vue と Element Plus を使用してマルチレベルのメニューとナビゲーション バーを実装する作業が完了しました。慎重なレイアウトと優れたインタラクションを通じて、ユーザーにより優れた Web サイト ナビゲーション エクスペリエンスを提供できます。もちろん、上記は単なる例であり、ニーズに応じてカスタマイズおよび拡張できます。

この記事がお役に立てば幸いです。コーディングを楽しんでください。

以上がvue と Element-plus を使用してマルチレベルのメニューとナビゲーション バーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。