Browse Source

Menu: support open and close submenu manually (#7412)

* Carbon: menu support open close submenu manually

* Update menu.md

* Update menu.md
Black Wayne 7 years ago
parent
commit
ab47262588
3 changed files with 21 additions and 10 deletions
  1. 5 7
      examples/docs/en-US/menu.md
  2. 9 3
      examples/docs/zh-CN/menu.md
  3. 7 0
      packages/menu/src/menu.vue

+ 5 - 7
examples/docs/en-US/menu.md

@@ -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  | — | — |
-
-
-
-
-
-
-

+ 9 - 3
examples/docs/zh-CN/menu.md

@@ -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
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |

+ 7 - 0
packages/menu/src/menu.vue

@@ -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() {