导航菜单Menu
侧边导航菜单
系统层级简单但功能数量多时，可使用侧边导航菜单进行“左右布局”。竖向排列的形式可以展示更多的菜单项
顶部导航菜单
系统层级简单且功能数量少时，可使用顶部导航菜单进行“上下布局”。该整体视觉动线简单，适合信息展示类系统。
顶导菜单&侧导菜单
系统层级简单但功能数量多时，可使用侧边导航菜单进行“左右布局”。竖向排列的形式可以展示更多的菜单项。
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| logo-src | 产品Logo | string | - | - |
| title | 产品名称（必填） | string | - | - |
| mode | 纵向、横向或组合展示 | string | horizontal: 横向;vertical: 竖向;combination:组合 | vertical |
| collapse | 是否开启折叠菜单功能 | boolean | - | false |
| filterable | 是否开启搜索菜单功能，仅支持侧边导航或组合导航 | boolean | - | false |
| menu-list | 侧边导航菜单对应数组展示数据 | array | 见示例 | - |
| menu-props | 侧边导航菜单数组对应的key | object | 见下列 | '{ iconKey: 'menu_icon',valueKey: 'menu_code',labelKey: 'menu_name',childrenKey:'children' }' |
| popper-class | 自定义类名 | string | - | - |
menu-props Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| iconKey | 作为 icon 唯一标识的键名 | string | - | - |
| valueKey | 作为 value 唯一标识的键名 | string | - | - |
| labelKey | 作为 icon 唯一标识的键名 | string | - | - |
| childrenKey | 作为 children 唯一标识的键名 | string | - | - |
Slots
| 插槽名 | 说明 |
|---|---|
| headerLeft | 顶栏容器左边部分，只对 mode="horizontal"或mode="combination" 有效 |
| headerCenter | 顶栏容器中间部分，只对 mode="horizontal"或mode="combination" 有效 |
| headerRight | 顶栏容器右边部分，只对 mode="horizontal"或mode="combination" 有效 |
| asideHeader | 侧边栏容器内容上边部分，只对 mode="vertical" 有效 |
| asideContent | 侧边栏容器内容中间部分，只对 mode="vertical"或mode="combination" 有效 |
| asideFooter | 侧边栏容器内容下边部分，只对 mode="vertical"或mode="combination" 有效 |
| asideFooterIcons | 侧边栏容器内容下边部分里面的icon，只对 mode="vertical"或mode="combination" 有效 |
| main | 主要区域容器 |
Events
| 方法名 | 说明 | 回调参数 |
|---|---|---|
| select | 菜单激活回调 | index: 选中菜单项的 index, indexPath: 选中菜单项的 index path, item: 选中菜单项, routeResult: vue-router 的返回值（如果 router 为 true） |
| open | sub-menu 展开的回调 | index: 打开的 sub-menu 的 index, indexPath: 打开的 sub-menu 的 index path |
| close | sub-menu 收起的回调 | index: 收起的 sub-menu 的 index, indexPath: 收起的 sub-menu 的 index path |