Comment utiliser vue et Element-plus pour implémenter des menus et des barres de navigation à plusieurs niveaux

Comment utiliser Vue et Element Plus pour implémenter des menus et des barres de navigation à plusieurs niveaux

Vue est un framework JavaScript très populaire qui est largement utilisé pour créer des interfaces utilisateur. Element Plus est une bibliothèque d'interface utilisateur basée sur Vue, qui fournit un riche ensemble de composants d'interface utilisateur pour créer facilement des interfaces utilisateur. Dans cet article, nous explorerons comment utiliser Vue et Element Plus pour implémenter des menus et des barres de navigation à plusieurs niveaux afin que les utilisateurs puissent facilement parcourir les différentes pages du site Web.

Tout d'abord, nous devons créer un projet Vue et installer Element Plus. Nous pouvons utiliser l'outil d'échafaudage de Vue pour créer un nouveau projet :

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

Installer Element Plus :

npm install element-plus --save

Ensuite, nous devons créer un composant qui contient un menu et une barre de navigation à plusieurs niveaux. Nous pouvons utiliser les composants Menu et Breadcrumb fournis par Element Plus pour réaliser cette fonction. Dans le composant fichier unique de Vue, nous pouvons utiliser ces composants comme ceci :

<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>

Dans le code ci-dessus, nous utilisons le composant el-menu pour créer un menu à plusieurs niveaux. Le composant el-menu-item représente l'élément de menu, el. Le composant -submenu représente un élément de menu qui contient un sous-menu. Lorsque l'utilisateur sélectionne un élément de menu, nous mettons à jour la valeur de la variable activeIndex et mettons à jour le contenu du fil d'Ariane en fonction de la valeur de activeIndex.

Dans le composant Vue, nous pouvons définir des données via l'attribut data et définir des méthodes pour gérer les événements de sélection de menu dans l'attribut méthodes. Dans la méthode handleSelect, nous mettons à jour les données activeIndex et breadcrumb en fonction de la valeur d'index de l'élément de menu sélectionné.

Enfin, utilisez ce composant dans notre instance Vue :

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

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

En introduisant et en utilisant le composant Navigation, nous avons ajouté un menu et une barre de navigation à plusieurs niveaux à notre application. Dans le même temps, nous avons également ajouté un composant de vue du routeur pour naviguer entre les différentes pages.

Jusqu'à présent, nous avons terminé le travail de mise en œuvre de menus et de barres de navigation à plusieurs niveaux à l'aide de Vue et Element Plus. Grâce à une mise en page soignée et une bonne interaction, nous pouvons offrir aux utilisateurs une meilleure expérience de navigation sur le site Web. Bien entendu, ce qui précède n’est qu’un exemple simple, vous pouvez le personnaliser et l’étendre en fonction de vos besoins.

J'espère que cet article vous sera utile, et bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!