## NavMenu 导航菜单 为网站提供导航功能的菜单。 ### 顶栏 适用广泛的基础用法。 ::: demo 导航菜单默认为垂直模式，通过 `mode` 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 `submenu` 组件可以生成二级菜单。 ```html 处理中心 选项1 选项2 选项3 订单管理

处理中心 选项1 选项2 选项3 订单管理 ``` ::: ### 侧栏 垂直菜单，可内嵌子菜单。 ::: demo 通过 `el-menu-item-group` 组件可以实现菜单进行分组，分组名可以通过 `title` 属性直接设定也可以通过具名 slot 来设定。 ```html

带 icon

选项1 选项2 选项3 选项1 导航二 导航三

不带 icon

选项1 选项2 选项3 选项1 导航二 导航三

分组

导航一 导航二 导航三 导航四 ``` ::: ### Menu Attribute | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | mode | 模式 | string | horizontal,vertical | vertical | | theme | 主题色 | string | light,dark | light | | default-active | 当前激活菜单的 index | string | — | — | | default-openeds | 当前打开的submenu的 key 数组 | Array | — | — | | unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false | | menu-trigger | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string | — | hover | | router | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean | — | false | ### Menu Events | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | select | 菜单激活回调 | index: 选中菜单项的 indexPath: 选中菜单项的 index path | | open | SubMenu 展开的回调 | index: 打开的 subMenu 的 index， indexPath: 打开的 subMenu 的 index path | | close | SubMenu 收起的回调 | index: 收起的 subMenu 的 index， indexPath: 收起的 subMenu 的 index path | ### SubMenu Attribute | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | index | 唯一标志 | string | — | — | ### Menu-Item Attribute | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | index | 唯一标志 | string | — | — | | route | Vue Router 路径对象 | Object | — | — | ### Menu-Group Attribute | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | title | 分组标题 | string | — | — |