2020-02-04 23:13:53 +08:00
|
|
|
# 菜单 Menu
|
2020-02-07 22:31:26 +08:00
|
|
|
没有吃的。
|
|
|
|
<!--single-column-->
|
|
|
|
## 演示
|
|
|
|
```demo
|
|
|
|
horizontal
|
2020-09-17 12:09:15 +08:00
|
|
|
default-expanded-keys
|
2020-02-07 22:31:26 +08:00
|
|
|
indent
|
|
|
|
collapse
|
|
|
|
```
|
|
|
|
|
|
|
|
## Props
|
|
|
|
### Menu Props
|
|
|
|
|名称|类型|默认值|说明|
|
|
|
|
|-|-|-|-|
|
2020-09-17 12:09:15 +08:00
|
|
|
|collapsed-icon-size|`number`|`24`|菜单折叠时图标的大小,如果为设定则使用 `icon-size` 代替|
|
2020-10-22 17:25:26 +08:00
|
|
|
|collapsed-width|`number`|`undefined`|折叠后菜单的宽度|
|
2020-09-17 12:09:15 +08:00
|
|
|
|collapsed|`boolean`|`false`|菜单是否折叠,值在菜单为垂直时有用|
|
|
|
|
|default-expanded-keys|`Array<string>`|`[]`|在非受控状态下默认展开的子菜单标识符数组|
|
|
|
|
|expanded-keys|`Array<string>`|`undefined`|展开的子菜单标识符数组,如果设定了,菜单的展开将会进入受控状态,`default-expanded-keys` 不会生效|
|
2020-02-07 22:31:26 +08:00
|
|
|
|icon-size|`number`|`20`|菜单未折叠时图标的大小|
|
2020-06-17 12:45:10 +08:00
|
|
|
|indent|`number`|`32`|菜单每级的缩进|
|
2020-10-22 17:25:26 +08:00
|
|
|
|items|`Array<MenuItem \| Submenu \| MenuItemGroup>`|`[]`|菜单的数据|
|
2020-06-17 12:45:10 +08:00
|
|
|
|mode|`'vertical' \| 'horizontal'`|`'vertical'`||
|
2020-10-23 17:05:04 +08:00
|
|
|
|popover-body-style|`object`|`{ padding: '2px 4px', minWidth: '180px' }`|菜单收缩时子菜单弹层的样式|
|
2020-09-17 12:09:15 +08:00
|
|
|
|root-indent|`number`|`32`|菜单第一级的缩进,如果没有设定,使用 `indent` 代替|
|
2020-10-23 15:01:01 +08:00
|
|
|
|theme|`'light' \| 'dark' \| string`|`undefined`||
|
2020-10-22 17:25:26 +08:00
|
|
|
|value|`string`|`null`|菜单当前的选中值|
|
2020-09-17 12:09:15 +08:00
|
|
|
|on-update:expanded-keys|`(value: string[]) => any`|`() => {}`||
|
2020-10-08 00:25:38 +08:00
|
|
|
|on-update:value|`(value: string) => any`|`() => {}`||
|
2020-02-07 22:31:26 +08:00
|
|
|
|
2020-06-17 12:45:10 +08:00
|
|
|
### MenuItem Properties
|
|
|
|
|名称|类型|说明|
|
2020-02-07 22:31:26 +08:00
|
|
|
|-|-|-|
|
2020-06-17 12:45:10 +08:00
|
|
|
|disabled|`boolean`||
|
2020-09-17 12:17:50 +08:00
|
|
|
|extra|`string \| (() => VNode \| Array<VNode>)`||
|
2020-09-17 12:09:15 +08:00
|
|
|
|icon|`() => VNode`||
|
|
|
|
|key|`string`|菜单项的标识符,**必需**|
|
|
|
|
|title|`string \| (() => VNode \| Array<VNode>)`||
|
2020-02-07 22:31:26 +08:00
|
|
|
|
2020-06-17 12:45:10 +08:00
|
|
|
### Submenu Properties
|
|
|
|
|名称|类型|说明|
|
2020-02-07 22:31:26 +08:00
|
|
|
|-|-|-|
|
2020-06-17 12:45:10 +08:00
|
|
|
|children|`Array<MenuItem \| Submenu \| MenuItemGroup>`|**必需**|
|
|
|
|
|disabled|`boolean`||
|
2020-09-17 12:17:50 +08:00
|
|
|
|extra|`string \| (() => VNode \| Array<VNode>)`||
|
2020-09-17 12:09:15 +08:00
|
|
|
|icon|`() => VNode`||
|
|
|
|
|key|`string`|菜单项的标识符,**必需**|
|
|
|
|
|title|`string \| (() => VNode \| Array<VNode>)`||
|
2020-06-17 12:45:10 +08:00
|
|
|
|type|`'submenu'`|**必需**|
|
2020-02-07 22:31:26 +08:00
|
|
|
|
2020-06-17 12:45:10 +08:00
|
|
|
### MenuItemGroup Properties
|
|
|
|
|名称|类型|说明|
|
2020-02-07 22:31:26 +08:00
|
|
|
|-|-|-|
|
2020-06-17 12:45:10 +08:00
|
|
|
|children|`Array<MenuItem \| Submenu \| MenuItemGroup>`|**必需**|
|
2020-09-17 12:17:50 +08:00
|
|
|
|key|`string`|菜单项的标识符,**必需**|
|
|
|
|
|title|`string \| (() => VNode \| Array<VNode>)`||
|
2020-06-17 12:45:10 +08:00
|
|
|
|type|`'group'`|**必需**|
|
2020-02-07 22:31:26 +08:00
|
|
|
|