elementui navmenu
使用 ElementUI NavMenu 导航菜单
ElementUI 的 NavMenu 组件提供了一种简单的方式来实现网站或应用的导航菜单。以下是关于如何使用和配置 NavMenu 的详细说明。
基本用法
NavMenu 组件支持水平和垂直两种布局模式。默认情况下，菜单是垂直的，可以通过设置 mode 属性为 horizontal 来切换为水平布局。
<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">首页</el-menu-item>
<el-submenu index="2">
<template #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-item index="3">关于我们</el-menu-item>
</el-menu>配置属性
NavMenu 提供了多种属性来自定义菜单行为：
default-active：设置默认激活的菜单项。mode：菜单模式，可选值为horizontal或vertical。background-color：菜单背景色。text-color：菜单文本颜色。active-text-color：激活菜单项的文字颜色。
<el-menu
:default-active="activeIndex"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">产品</el-menu-item>
</el-menu>动态生成菜单
可以通过遍历数据动态生成菜单项，适用于菜单内容经常变化的场景。
<el-menu :default-active="activeIndex">
<el-menu-item
v-for="item in menuItems"
:key="item.index"
:index="item.index">
{{ item.title }}
</el-menu-item>
</el-menu>事件处理
NavMenu 提供了 select 事件，可以在用户选择菜单项时触发自定义逻辑。
<el-menu @select="handleSelect">
<el-menu-item index="1">首页</el-menu-item>
</el-menu>methods: {
handleSelect(index) {
console.log('选中菜单项:', index);
}
}子菜单和嵌套
使用 el-submenu 组件可以实现多级嵌套菜单，适合复杂的导航结构。
<el-menu>
<el-submenu index="1">
<template #title>产品</template>
<el-menu-item index="1-1">产品1</el-menu-item>
<el-submenu index="1-2">
<template #title>子产品</template>
<el-menu-item index="1-2-1">子产品1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>路由集成
可以将 NavMenu 与 Vue Router 集成，通过 router 属性启用路由模式，点击菜单项时自动跳转到对应路由。
<el-menu :router="true">
<el-menu-item index="/home">首页</el-menu-item>
<el-menu-item index="/about">关于</el-menu-item>
</el-menu>样式定制
通过覆盖默认的 CSS 类名，可以自定义菜单的样式，例如调整间距、字体大小等。
.el-menu {
border-right: none;
}
.el-menu-item {
font-size: 16px;
}以上是关于 ElementUI NavMenu 的主要用法和配置方法，适用于大多数导航菜单的实现需求。
