Maison >interface Web >Voir.js >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
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
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!