Rumah > Artikel > hujung hadapan web > Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi navigasi menu berbilang peringkat
Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi navigasi menu berbilang peringkat
- 王林asal
- 2023-07-22 16:33:142297semak imbas
Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi navigasi menu berbilang peringkat
Pengenalan:
Dengan peningkatan kerumitan aplikasi web moden, fungsi navigasi menu berbilang peringkat telah menjadi bahagian penting. Sebagai rangka kerja JavaScript yang popular, Vue digunakan secara meluas dalam pembangunan bahagian hadapan untuk kesederhanaan, kemudahan penggunaan dan fleksibilitinya. Element-UI ialah satu set perpustakaan komponen UI berdasarkan Vue, yang menyediakan set komponen dan gaya yang kaya serta sesuai untuk membina antara muka web moden. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi navigasi menu berbilang peringkat dan menyediakan contoh kod.
Struktur HTML:
Pertama, kita perlu mencipta elemen kontena dalam fail HTML untuk mengehoskan aplikasi Vue. Kemudian, buat komponen 0335875a31945e6c7d307ca638979f92 dalam bekas untuk memaparkan navigasi menu. Contoh kod adalah seperti berikut: 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; // 更新当前选中的菜单项的索引
}
}
});Skrip Vue:Seterusnya, kita perlu menulis skrip Vue untuk mengawal tingkah laku navigasi menu. Pertama, kita perlu mengimport Vue dan Element-UI dan mencipta contoh Vue. Kemudian, tentukan atribut data dalam contoh untuk menyimpan indeks item menu yang sedang dipilih. Akhir sekali, tentukan kaedah handleMenuSelect dalam contoh untuk mengendalikan acara pemilihan item menu. Contoh kod adalah seperti berikut:
<!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>Kod sampel penuh:Berikut ialah kod contoh lengkap untuk melaksanakan fungsi navigasi menu berbilang peringkat menggunakan Vue dan Element-UI:
rrreee
Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk melaksanakan fungsi navigasi menu berbilang peringkat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!