# UMenu 菜单
- [示例](#示例)
- [基本用法](#基本用法)
- [多级菜单](#多级菜单)
- [禁用、禁用某一项](#禁用-禁用某一项)
- [分隔符](#分隔符)
- [分组](#分组)
- [UMenu API](#umenu-api)
- [Props/Attrs](#propsattrs)
- [Slots](#slots)
- [Events](#events)
- [Methods](#methods)
- [UMenuItem API](#umenuitem-api)
- [Props/Attrs](#propsattrs-2)
- [Events](#events-2)
- [UMenuGroup API](#umenugroup-api)
- [Props/Attrs](#propsattrs-3)
- [Slots](#slots-2)
- [Events](#events-3)
- [UMenuDivider API](#umenudivider-api)
**路由链接**, **块级展示**
菜单组件支持路由、触发关闭、多级菜单等功能。
## 示例
### 基本用法
可以结合 Popup 或 Popper 弹出菜单。
``` html
Popup 菜单
指南
API
原型组件
GitHub
Popper 菜单
指南
API
原型组件
GitHub
```
### 多级菜单
``` html
指南
API
命令行工具（CLI）
配置
组件
原型组件
Basic
链接 Link
按钮 Button
徽章 Badge
Navigation
导航栏 Navbar
侧边栏 Sidebar
菜单 Menu
Popper
弹出层 Popper
工具提示 Tooltip
弹出框 Popup
组件设计方案
GitHub
多级菜单
指南
API
命令行工具（CLI）
配置
组件
原型组件
Basic
链接 Link
按钮 Button
徽章 Badge
Navigation
导航栏 Navbar
侧边栏 Sidebar
菜单 Menu
Popper
弹出层 Popper
工具提示 Tooltip
弹出框 Popup
组件设计方案
GitHub
```
### 禁用、禁用某一项
``` html
指南
概念
组件
指南
概念
组件
```
### 分隔符
``` html
指南
概念
配置
组件
组件库
```
### 分组
``` html
默认，无折叠功能
链接
按钮
标签
导航栏
侧边栏
标签页
单行输入
多行输入
选择框
表单
```
## UMenu API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| router | boolean | | `true` | 是否根据 vue-router 来控制选择哪一项 |
| value.sync, v-model | any | | | 当前选择的值 |
| collapsible | boolean | | `false` | 分组是否可以折叠 |
| accordion | boolean | | `false` | 是否每次只会展开一个分组 |
| expand-trigger | string | | `'click'` | 展开/折叠的触发方式。可选值：`'click'`表示整行点击均可触发、`'click-expander'`表示仅点击小箭头时触发 |
| readonly | boolean | | `false` | 是否只读 |
| disabled | boolean | | `false` | 是否禁用 |
### Slots
#### (default)
插入``、``或``子组件。
### Events
#### @before-select
选择某一项前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 选择项的值 |
| $event.oldValue | any | 旧的值 |
| $event.item | object | 选择项相关对象 |
| $event.itemVM | UMenuItem | 选择项子组件 |
| $event.preventDefault | Function | 阻止选择流程 |
#### @input
选择某一项时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | any | 选择项的值 |
#### @select
选择某一项时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 改变后的值 |
| $event.oldValue | any | 旧的值 |
| $event.item | object | 选择项相关对象 |
| $event.oldItem | object | 旧的选择项相关对象 |
| $event.itemVM | UMenuItem | 选择项子组件 |
| $event.oldVM | UMenuItem | 旧的选择项子组件 |
| senderVM | UMenu | 发送事件实例 |
#### @toggle
展开/折叠某分组时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.expanded | boolean | 展开/折叠状态 |
| $event.groupVM | UMenuGroup | 分组组件 |
Methods
#### toggleAll(expanded)
展开/折叠所有分组
| Param | Type | Default | Description |
| ----- | ---- | ------- | ----------- |
| expanded | boolean | | 展开/折叠 |
## UMenuItem API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| text | string | | | 文本内容 |
| value | any | | | 此项的值 |
| disabled | boolean | | `false` | 禁用此项 |
| item | object | | | 相关对象。当选择此项时，抛出的事件会传递该对象，便于开发 |
| linkType | string | `[object Object]`
`[object Object]` | `'destination'` | 链接类型 |
| hrefAndTo | string | | | 链接地址 |
| target | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'_self'` | 父级窗口和顶级窗口仅适用于iframe组件嵌套的情况，若不存在嵌套，则打开方式同当前窗口。 |
| replace | boolean | | `false` | 需要 vue-router，与``的`replace`属性相同。如果为`true`，当点击时，会调用`router.replace()`而不是`router.push()`，于是导航后不会留下`history `记录。 |
| exact | boolean | | `false` | 需要 vue-router，与``的`exact`属性相同。是否与路由完全一致时才高亮显示。 |
### Events
#### @click
点击此项时触发，与原生 click 事件不同的是，它只会在非只读和禁用的情况下触发。
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | MouseEvent | 鼠标事件对象 |
| senderVM | Vue | 发送事件实例 |
#### @before-select
选择此项前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 此项的值 |
| $event.item | object | 此项的相关对象 |
| $event.itemVM | UMenuItem | 此组件 |
| $event.preventDefault | Function | 阻止选择流程 |
| senderVM | Vue | 发送事件实例 |
#### @before-navigate
使用 router 相关属性切换路由前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.to | string, Location | `to`属性的值 |
| $event.replace | boolean | `replace`属性的值 |
| $event.exact | boolean | `exact`属性的值 |
| $event.preventDefault | Function | 阻止切换流程 |
| senderVM | Vue | 发送事件实例 |
#### @navigate
使用router相关属性切换路由时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.to | string, Location | `to`属性的值 |
| $event.replace | boolean | `replace`属性的值 |
| $event.exact | boolean | `exact`属性的值 |
| senderVM | Vue | 发送事件实例 |
## UMenuGroup API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| title | string | | | 显示的标题 |
### Slots
#### (default)
插入``或``子组件。
#### sub
插入子菜单``。
#### title
自定义标题文本。
#### extra
在右侧可以附加内容。
### Events
#### @before-toggle
展开/折叠此分组前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.expanded | boolean | 展开/折叠状态 |
| $event.groupVM | UMenuGroup | 分组组件 |
| $event.preventDefault | Function | 阻止展开/折叠流程 |
| senderVM | Vue | 发送事件实例 |
#### @toggle
展开/折叠某分组时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.expanded | boolean | 展开/折叠状态 |
| $event.groupVM | UMenuGroup | 分组组件 |
| senderVM | Vue | 发送事件实例 |
## UMenuDivider API
暂无