以下是 Element Plus 中常用的导航组件和简单的使用示例：
1. 菜单（Menu）组件：用于创建导航菜单。
<template>
<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">Home</el-menu-item>
<el-menu-item index="2">About</el-menu-item>
<el-menu-item index="3">Contact</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1'
};
},
methods: {
handleSelect(index) {
this.activeIndex = index;
// 处理导航菜单的点击事件
}
}
};
</script>
2. 面包屑（Breadcrumb）组件：用于显示页面层级结构。
<template>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/about' }">About</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/contact' }">Contact</el-breadcrumb-item>
</el-breadcrumb>
</template>
3. 标签页（Tabs）组件：用于在同一页面内切换不同的内容区域。
<template>
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane label="Home" name="home">Home Content</el-tab-pane>
<el-tab-pane label="About" name="about">About Content</el-tab-pane>
<el-tab-pane label="Contact" name="contact">Contact Content</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeTab: 'home'
};
},
methods: {
handleTabClick(tab) {
// 处理标签页点击事件
}
}
};
</script>
这只是 Element Plus 导航组件的一小部分示例，你可以根据实际需求选择合适的组件进行使用。详细的文档和更多组件示例可以在 Element Plus 官方网站上找到：[Element Plus 官方文档](https://element-plus.org/#/zh-CN)。
转载请注明出处：http://www.zyzy.cn/article/detail/5566/ElementPlus