From 202f6417b143955d839f7a08c67c72633ed5a029 Mon Sep 17 00:00:00 2001
From: baiyaaaaa <bigpet1991@gmail.com>
Date: Fri, 9 Feb 2018 11:05:37 +0800
Subject: [PATCH] Menu: support multi level submenu in horizontal mode (#9741)

---
 examples/docs/en-US/menu.md        | 12 ++++++++++++
 examples/docs/zh-CN/menu.md        | 12 ++++++++++++
 packages/menu/src/submenu.vue      | 19 +++++++++++--------
 packages/theme-chalk/src/menu.scss |  3 ++-
 4 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/examples/docs/en-US/menu.md b/examples/docs/en-US/menu.md
index 71385db8..2de3e842 100644
--- a/examples/docs/en-US/menu.md
+++ b/examples/docs/en-US/menu.md
@@ -68,6 +68,12 @@ Top bar NavMenu can be used in a variety of scenarios.
     <el-menu-item index="2-1">item one</el-menu-item>
     <el-menu-item index="2-2">item two</el-menu-item>
     <el-menu-item index="2-3">item three</el-menu-item>
+    <el-submenu index="2-4">
+      <template slot="title">item four</template>
+      <el-menu-item index="2-4-1">item one</el-menu-item>
+      <el-menu-item index="2-4-2">item two</el-menu-item>
+      <el-menu-item index="2-4-3">item three</el-menu-item>
+    </el-submenu>
   </el-submenu>
   <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
 </el-menu>
@@ -86,6 +92,12 @@ Top bar NavMenu can be used in a variety of scenarios.
     <el-menu-item index="2-1">item one</el-menu-item>
     <el-menu-item index="2-2">item two</el-menu-item>
     <el-menu-item index="2-3">item three</el-menu-item>
+    <el-submenu index="2-4">
+      <template slot="title">item four</template>
+      <el-menu-item index="2-4-1">item one</el-menu-item>
+      <el-menu-item index="2-4-2">item two</el-menu-item>
+      <el-menu-item index="2-4-3">item three</el-menu-item>
+    </el-submenu>
   </el-submenu>
   <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
 </el-menu>
diff --git a/examples/docs/zh-CN/menu.md b/examples/docs/zh-CN/menu.md
index b7ece95f..a6ba788f 100644
--- a/examples/docs/zh-CN/menu.md
+++ b/examples/docs/zh-CN/menu.md
@@ -69,6 +69,12 @@
     <el-menu-item index="2-1">选项1</el-menu-item>
     <el-menu-item index="2-2">选项2</el-menu-item>
     <el-menu-item index="2-3">选项3</el-menu-item>
+    <el-submenu index="2-4">
+      <template slot="title">选项4</template>
+      <el-menu-item index="2-4-1">选项1</el-menu-item>
+      <el-menu-item index="2-4-2">选项2</el-menu-item>
+      <el-menu-item index="2-4-3">选项3</el-menu-item>
+    </el-submenu>
   </el-submenu>
   <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
 </el-menu>
@@ -87,6 +93,12 @@
     <el-menu-item index="2-1">选项1</el-menu-item>
     <el-menu-item index="2-2">选项2</el-menu-item>
     <el-menu-item index="2-3">选项3</el-menu-item>
+    <el-submenu index="2-4">
+      <template slot="title">选项4</template>
+      <el-menu-item index="2-4-1">选项1</el-menu-item>
+      <el-menu-item index="2-4-2">选项2</el-menu-item>
+      <el-menu-item index="2-4-3">选项3</el-menu-item>
+    </el-submenu>
   </el-submenu>
   <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
 </el-menu>
diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue
index 14d35550..37746cea 100644
--- a/packages/menu/src/submenu.vue
+++ b/packages/menu/src/submenu.vue
@@ -193,7 +193,9 @@
         title && (title.style.backgroundColor = this.rootMenu.backgroundColor || '');
       },
       updatePlacement() {
-        this.currentPlacement = this.mode === 'horizontal' ? 'bottom-start' : 'right-start';
+        this.currentPlacement = this.mode === 'horizontal' && this.rootMenu === this.$parent
+          ? 'bottom-start'
+          : 'right-start';
       },
       initPopper() {
         this.referenceElm = this.$el;
@@ -225,7 +227,8 @@
         currentPlacement,
         menuTransitionName,
         mode,
-        popperClass
+        popperClass,
+        $parent
       } = this;
 
       const popupMenu = (
@@ -259,6 +262,11 @@
         </el-collapse-transition>
       );
 
+      const submenuTitleIcon = (
+        rootMenu.mode === 'horizontal' && $parent === rootMenu ||
+        rootMenu.mode === 'vertical' && !rootMenu.collapse
+      ) ? 'el-icon-arrow-down' : 'el-icon-arrow-right';
+
       return (
         <li
           class={{
@@ -282,12 +290,7 @@
             style={[paddingStyle, titleStyle, { backgroundColor }]}
           >
             {$slots.title}
-            <i class={{
-              'el-submenu__icon-arrow': true,
-              'el-icon-arrow-down': rootMenu.mode === 'horizontal' || rootMenu.mode === 'vertical' && !rootMenu.collapse,
-              'el-icon-arrow-right': rootMenu.mode === 'vertical' && rootMenu.collapse
-            }}>
-            </i>
+            <i class={[ 'el-submenu__icon-arrow', submenuTitleIcon ]}></i>
           </div>
           {this.isMenuPopup ? popupMenu : inlineMenu}
         </li>
diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss
index 924c4c99..620a073c 100644
--- a/packages/theme-chalk/src/menu.scss
+++ b/packages/theme-chalk/src/menu.scss
@@ -81,7 +81,8 @@
       }
     }
     & .el-menu {
-      & .el-menu-item {
+      & .el-menu-item,
+      & .el-submenu__title {
         background-color: $--color-white;
         float: none;
         height: 36px;