Maison > Article > interface Web > Comment utiliser Vue et Element-UI pour implémenter la fonction de navigation dans les menus à plusieurs niveaux

Comment utiliser Vue et Element-UI pour implémenter la fonction de navigation dans les menus à plusieurs niveaux

王林original: 2023-07-22 16:33:142297parcourir

Introduction :
Avec la complexité croissante des applications Web modernes, la fonction de navigation dans les menus à plusieurs niveaux est devenue un élément essentiel. En tant que framework JavaScript populaire, Vue est largement utilisé dans le développement front-end pour sa simplicité, sa facilité d'utilisation et sa flexibilité. Element-UI est un ensemble de bibliothèques de composants d'interface utilisateur basées sur Vue, qui fournit un riche ensemble de composants et de styles et convient à la création d'interfaces Web modernes. Cet article expliquera comment utiliser Vue et Element-UI pour implémenter des fonctions de navigation dans les menus à plusieurs niveaux et fournira des exemples de code.

Structure HTML :
Tout d'abord, nous devons créer un élément conteneur dans le fichier HTML pour héberger l'application Vue. Créez ensuite un composant 0335875a31945e6c7d307ca638979f92 dans le conteneur pour afficher la navigation dans les menus. L'exemple de code est le suivant : 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;   // 更新当前选中的菜单项的索引
    }
  }
});

Script Vue :

Ensuite, nous devons écrire un script Vue pour contrôler le comportement de la navigation dans les menus. Tout d’abord, nous devons importer Vue et Element-UI et créer une instance Vue. Ensuite, définissez un attribut data dans l'instance pour stocker l'index de l'élément de menu actuellement sélectionné. Enfin, définissez une méthode handleMenuSelect dans l'instance pour gérer l'événement de sélection de l'élément de menu. L'exemple de code est le suivant :

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

Exemple de code complet :

Ce qui suit est l'exemple de code complet utilisant Vue et Element-UI pour implémenter la fonction de navigation dans les menus à plusieurs niveaux :
rrreee

Résumé :🎜En utilisant Vue et Element-UI , nous pouvons facilement implémenter une fonction de navigation dans les menus à plusieurs niveaux. Cet article décrit comment l'implémenter via la structure HTML et les scripts Vue, et fournit un exemple de code complet. J'espère que cet article pourra vous aider à comprendre et à appliquer la fonction de navigation dans les menus à plusieurs niveaux. 🎜

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!

JavaScript html 事件 ui

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment le composant keep-alive implémente la mise en cache des pages dans vueArticle suivant：Comment le composant keep-alive implémente la mise en cache des pages dans vue

Articles Liés

Voir plus