elementui navmenu
elementui navmenu 基本用法
Element UI 的 NavMenu 组件用于创建导航菜单，支持横向和纵向布局。基本使用方式是通过 el-menu 标签包裹 el-menu-item 或 el-submenu 实现层级结构。
横向菜单示例代码：
<el-menu mode="horizontal" :default-active="activeIndex">
<el-menu-item index="1">首页</el-menu-item>
<el-submenu index="2">
<template slot="title">产品</template>
<el-menu-item index="2-1">产品列表</el-menu-item>
<el-menu-item index="2-2">产品详情</el-menu-item>
</el-submenu>
<el-menu-item index="3">关于我们</el-menu-item>
</el-menu>纵向菜单示例代码：
<el-menu default-active="2" class="el-menu-vertical-demo">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-submenu>
</el-menu>导航菜单属性配置
NavMenu 提供多种属性用于自定义菜单行为：
mode：菜单类型，可选horizontal/verticalbackground-color：菜单背景色text-color：菜单文字颜色active-text-color：激活菜单文字颜色default-active：默认激活的菜单项router：是否使用 vue-router 模式
动态激活菜单项的实现：
data() {
return {
activeIndex: '1'
}
}导航菜单事件处理
NavMenu 提供多种事件用于交互处理：
select：菜单激活回调open：submenu 展开回调close：submenu 收起回调
事件处理示例：
<el-menu @select="handleSelect">
<!-- 菜单项 -->
</el-menu>
<script>
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath)
}
}
</script>响应式导航菜单实现
结合 Element UI 的响应式布局组件，可以创建适应不同屏幕尺寸的导航菜单：
<el-row>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
<el-menu>
<!-- 菜单内容 -->
</el-menu>
</el-col>
</el-row>移动端适配方案：
<el-menu :collapse="isCollapse">
<!-- 可折叠菜单项 -->
</el-menu>
<script>
data() {
return {
isCollapse: false
}
},
mounted() {
window.addEventListener('resize', this.handleResize)
this.handleResize()
},
methods: {
handleResize() {
this.isCollapse = window.innerWidth < 768
}
}
</script>导航菜单样式定制
通过 CSS 覆盖可以自定义导航菜单样式：
.el-menu {
border-right: none;
}
.el-menu-item {
font-size: 14px;
}
.el-submenu__title {
color: #333;
}
.custom-menu {
background-color: #f5f7fa;
}主题色修改示例：
.el-menu--horizontal {
--el-menu-active-color: #ff6a00;
}
.el-menu--vertical {
--el-menu-bg-color: #545c64;
}
