# Menu 导航菜单
为页面和功能提供导航的菜单列表。

### 何时使用
导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

### 顶栏
适用广泛的基础用法。

@[demo](./demo/topbar.vue)


### 侧栏
垂直菜单，可内嵌子菜单。

@[demo](./demo/vertical.vue)


### 折叠

@[demo](./demo/fold.vue)

### query 模式

@[demo](./demo/query.vue)

### router 模式

@[demo](./demo/router.vue)


### Menu Attribute
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| mode     | 模式   | string  |   horizontal / vertical   | vertical |
| collapse  | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean  |   —   | false |
| background-color  | 菜单的背景色（仅支持 hex 格式） | string |   —   | #ffffff |
| text-color  | 菜单的文字颜色（仅支持 hex 格式） | string |   —   | #303133 |
| active-text-color  | 当前激活菜单的文字颜色（仅支持 hex 格式） | string |   —   | #409EFF |
| default-active | 当前激活菜单的 index, 可使用 `v-model` 双向绑定 | string    | — | — |
| default-openeds | 当前打开的 submenu 的 index 的数组 | Array    | — | — |
| unique-opened  | 是否只保持一个子菜单的展开 | boolean   | — | false   |
| menu-trigger  | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string   | — | hover   |
| query | 是否启用 `query` 保证页面刷新之后激活的菜单还是刷新之前的，开启 `router` 模式之后，此参数没用 | boolean | - | false |
| query-key | 使用 `query` 模式时设置 `queryKey`，当一个页面中有多个 `menu` 使用 `query` 模式时最好传入此参数 | string | - | `'mm_menu_active'` |
| router  | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 `menu-item` 的 `route` 作为 path 进行路由跳转 | boolean   | — | false   |
| collapse-transition  | 是否开启折叠动画 | boolean   | — | true   |
| indent | 菜单项左右缩进, 可传数字或函数, 单位为 'px', 传函数时，函数参数为当前菜单项的层级| number | function | - | 20 |

### Menu Methods
| 事件名称      | 说明    | 参数      |
|---------- |-------- |---------- |
| open  | 展开指定的 submenu | index: 需要打开的 submenu 的 index |
| close  | 收起指定的 submenu | index: 需要收起的 submenu 的 index |

### Menu Events
| 事件名称      | 说明    | 回调参数      |
|---------- |-------- |---------- |
| select  | 菜单激活回调 | index: 选中菜单项的 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  | — | — |
| popper-class | 弹出菜单的自定义类名 | string | — | — |
| show-timeout | 展开 submenu 的延时 | number | — | 300 |
| hide-timeout | 收起 submenu 的延时 | number | — | 300 |
| disabled  | 是否禁用 | boolean | — | false |
| routeable  | router 或 query 模式时是否可以进行路由 | boolean | — | true |

### Menu-Item Attribute
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| index     | 唯一标志   | string  | — | — |
| route     | Vue Router 路径对象 | Object \| String | — | `{ path: index }` |
| disabled  | 是否禁用 | boolean | — | false |
| routeable  | router 或 query 模式时是否可以进行路由 | boolean | — | true |

### Menu-Group Attribute
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| title     | 分组标题   | string  | — | — |