Menu: add menu-trigger prop (#649)

CHANGELOG.md

@@ -20,6 +20,7 @@
 - 优化 TimePicker/DatePicker 输入日期行为
 - 修复 DatePicker 输入禁用状态的日期却生效的问题 #484
 - 新增 Slider 的 disabled 属性
+- 新增 Menu 的 menu-trigger 属性
 
 #### 非兼容性更新
 

examples/docs/zh-cn/menu.md

@@ -154,6 +154,7 @@
 | default-active | 当前激活菜单的 index | string    | — | — |
 | default-openeds | 当前打开的submenu的 key 数组 | Array    | — | — |
 | unique-opened  | 是否只保持一个子菜单的展开 | boolean   | — | false   |
+| menu-trigger  | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string   | — | hover   |
 | router  | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean   | — | false   |
 
 ### Menu Events

packages/menu/src/menu.vue

@@ -33,7 +33,11 @@
         default: 'light'
       },
       uniqueOpened: Boolean,
-      router: Boolean
+      router: Boolean,
+      menuTrigger: {
+        type: String,
+        default: 'hover'
+      }
     },
     data() {
       return {
@@ -94,7 +98,11 @@
         }
 
         if (this.router && route) {
-          this.$router.push(route);
+          try {
+            this.$router.push(route);
+          } catch (e) {
+            console.error(e);
+          }
         }
       },
       openActiveItemMenus() {

packages/menu/src/submenu.vue

@@ -1,10 +1,12 @@
 <template>
   <li
-    :class="{ 'el-submenu': true, 'is-active': active, 'is-opened': opened}"
+    :class="{
-    @mouseenter="handleMouseenter"
+      'el-submenu': true,
-    @mouseleave="handleMouseleave"
+      'is-active': active,
+      'is-opened': opened
+    }"
   >
-    <div class="el-submenu__title" @click="handleClick">
+    <div class="el-submenu__title" ref="submenu-title">
 
       <slot name="title"></slot>
       <i :class="{
@@ -51,19 +53,33 @@
         this.rootMenu.handleSubmenuClick(this.index, this.indexPath);
       },
       handleMouseenter() {
-        if (this.rootMenu.mode === 'horizontal') {
+        clearTimeout(this.timeout);
-          clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
-          this.timeout = setTimeout(() => {
+          this.rootMenu.openMenu(this.index, this.indexPath);
-            this.rootMenu.openMenu(this.index, this.indexPath);
+        }, 300);
-          }, 300);
-        }
       },
       handleMouseleave() {
-        if (this.rootMenu.mode === 'horizontal') {
+        clearTimeout(this.timeout);
-          clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
-          this.timeout = setTimeout(() => {
+          this.rootMenu.closeMenu(this.index, this.indexPath);
-            this.rootMenu.closeMenu(this.index, this.indexPath);
+        }, 300);
-          }, 300);
+      },
+      initEvents() {
+        let {
+          rootMenu,
+          handleMouseenter,
+          handleMouseleave,
+          handleClick
+        } = this;
+        let triggerElm;
+
+        if (rootMenu.mode === 'horizontal' && rootMenu.menuTrigger === 'hover') {
+          triggerElm = this.$el;
+          triggerElm.addEventListener('mouseenter', handleMouseenter);
+          triggerElm.addEventListener('mouseleave', handleMouseleave);
+        } else {
+          triggerElm = this.$refs['submenu-title'];
+          triggerElm.addEventListener('click', handleClick);
         }
       }
     },
@@ -74,6 +90,7 @@
       this.$on('item-select', (index, indexPath) => {
         this.active = indexPath.indexOf(this.index) !== -1;
       });
+      this.initEvents();
     }
   };
 </script>

test/unit/specs/menu.spec.js

@@ -228,6 +228,41 @@ describe('Menu', () => {
       }, 1000);
     }, 500);
   });
+  it('menu trigger click', done => {
+    const vm = createVue({
+      template: `
+        <el-menu mode="horizontal" menu-trigger="click">
+          <el-menu-item index="1">处理中心</el-menu-item>
+          <el-submenu index="2" ref="submenu">
+            <template slot="title">我的工作台</template>
+            <el-menu-item index="2-1">选项1</el-menu-item>
+            <el-menu-item index="2-2" ref="submenuItem2">选项2</el-menu-item>
+            <el-menu-item index="2-3">选项3</el-menu-item>
+          </el-submenu>
+          <el-menu-item index="3">订单管理</el-menu-item>
+        </el-menu>
+      `,
+      data() {
+        return {
+        };
+      }
+    }, true);
+    expect(vm.$el.classList.contains('el-menu--horizontal')).to.be.true;
+    var submenu = vm.$refs.submenu;
+    var triggerElm = submenu.$el.querySelector('.el-submenu__title');
+
+    triggerEvent(submenu.$el, 'mouseenter');
+    triggerElm.click();
+
+    setTimeout(_ => {
+      expect(submenu.$el.querySelector('.el-menu').style.display).to.not.ok;
+      triggerElm.click();
+      setTimeout(_ => {
+        expect(submenu.$el.querySelector('.el-menu').style.display).to.be.equal('none');
+        done();
+      }, 1000);
+    }, 500);
+  });
   it('horizontal submenu active', done => {
     const vm = createVue({
       template: `