mirror of https://github.com/ElemeFE/element
Menu: support open and close submenu manually (#7412)
* Carbon: menu support open close submenu manually * Update menu.md * Update menu.mdpull/7428/head^2
parent
5426c957a2
commit
ab47262588
|
@ -284,6 +284,11 @@ Vertical NavMenu could be collapsed.
|
|||
| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string | — | hover |
|
||||
| router | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action | boolean | — | false |
|
||||
|
||||
### Menu Methods
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| open | open a specific sub-menu | index: index of the sub-menu to open |
|
||||
| close | close a specific sub-menu | index: index of the sub-menu to close |
|
||||
|
||||
### Menu Events
|
||||
| Event Name | Description | Parameters |
|
||||
|
@ -312,10 +317,3 @@ Vertical NavMenu could be collapsed.
|
|||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| title | group title | string | — | — |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -279,17 +279,23 @@
|
|||
| text-color | 菜单的文字颜色(仅支持 hex 格式) | string | — | #2d2f33 |
|
||||
| active-text-color | 当前激活菜单的文字颜色(仅支持 hex 格式) | string | — | #409EFF |
|
||||
| default-active | 当前激活菜单的 index | string | — | — |
|
||||
| default-openeds | 当前打开的submenu的 key 数组 | Array | — | — |
|
||||
| default-openeds | 当前打开的sub-menu的 key 数组 | Array | — | — |
|
||||
| unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false |
|
||||
| menu-trigger | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string | — | hover |
|
||||
| router | 是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean | — | false |
|
||||
|
||||
### Menu Methods
|
||||
| 事件名称 | 说明 | 参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| open | 展开指定的 sub-menu | index: 需要打开的 sub-menu 的 index |
|
||||
| close | 收起指定的 sub-menu | index: 需要收起的 sub-menu 的 index |
|
||||
|
||||
### Menu Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| select | 菜单激活回调 | index: 选中菜单项的 indexPath: 选中菜单项的 index path |
|
||||
| open | SubMenu 展开的回调 | index: 打开的 subMenu 的 index, indexPath: 打开的 subMenu 的 index path |
|
||||
| close | SubMenu 收起的回调 | index: 收起的 subMenu 的 index, indexPath: 收起的 subMenu 的 index path |
|
||||
| open | sub-menu 展开的回调 | index: 打开的 sub-menu 的 index, indexPath: 打开的 sub-menu 的 index path |
|
||||
| close | sub-menu 收起的回调 | index: 收起的 sub-menu 的 index, indexPath: 收起的 sub-menu 的 index path |
|
||||
|
||||
### SubMenu Attribute
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
@ -255,6 +255,13 @@
|
|||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
open(index) {
|
||||
const { indexPath } = this.submenus[index.toString()];
|
||||
indexPath.forEach(i => this.openMenu(i, indexPath));
|
||||
},
|
||||
close(index) {
|
||||
this.closeMenu(index);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
Loading…
Reference in New Issue