atui
Version:
components built with Vue.js
126 lines (112 loc) • 2.86 kB
Markdown
category: Components
type: Navigation
title: Menu
subtitle: 导航菜单
## 何时使用
## API
### Menu
| 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|--------------|
| mode | 菜单类型,现在支持垂直、水平、和内嵌模式三种 | String: `vertical` `horizontal` `inline` | `vertical` |
| defaultSelectedKey | 当前默认选中的菜单项的uuid | String | |
| selectedKey | 当前选中的菜单项 uuid | String | |
| openOne | 是否只打开一个面板 | Boolean | false
### Menu.Item
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| disabled | 是否禁用 | Boolean | false |
| uuid | item 的唯一标志 | String | |
### Menu.SubMenu
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| disabled | 是否禁用 | Boolean | false |
| uuid | 唯一标志 | String | |
| title | 子菜单项值 | String or React.Element | |
### Menu.MenuItemGroup
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| title | 分组标题 | String or React.Element | |
### Menu动态渲染的数据结构
```jsx
[
{
type: 'SubMenu',
uuid: 'sub1',
title: '导航一',
show: true, // 是否展开SubMenu
children: [
{
type: 'MenuItemGroup',
title: '分组1',
uuid: 'sub1',
children: [
{
type: 'MenuItem',
uuid: '1',
content: '选项1'
},
{
type: 'MenuItem',
uuid: '2',
selected: true, // 是否选中该菜单项
content: '选项2'
}
]
},
{
type: 'MenuItemGroup',
title: '分组2',
uuid: 'sub2',
children: [
{
type: 'MenuItem',
uuid: '3',
content: '选项3'
},
{
type: 'MenuItem',
uuid: '4',
content: '选项4'
}
]
}
]
},
{
type: 'SubMenu',
title: '导航二',
uuid: 'sub2',
children: [
{
type: 'MenuItem',
uuid: '5',
content: '选项5'
},
{
type: 'MenuItem',
uuid: '6',
content: '选项6'
},
{
type: 'SubMenu',
uuid: 'sub3',
title: '三级导航',
children: [
{
type: 'MenuItem',
uuid: '7',
content: '选项7'
},
{
type: 'MenuItem',
uuid: '8',
content: '选项8'
}
]
}
]
}
]
```