From 4fa158eb3239b44faf47bae275e47a30ea37966b Mon Sep 17 00:00:00 2001
From: baiyaaaaa <bigpet1991@gmail.com>
Date: Mon, 19 Dec 2016 23:45:40 +0800
Subject: [PATCH] add suport for mutil level submenu

---
 examples/docs/en-US/menu.md           | 18 ++++++++----------
 examples/docs/zh-CN/menu.md           | 18 ++++++++----------
 packages/menu/src/menu-item-group.vue | 25 ++++++++++---------------
 packages/menu/src/menu-item.vue       | 22 +++++++++++-----------
 packages/menu/src/menu-mixin.js       | 13 +++++++++++++
 packages/menu/src/submenu.vue         | 11 +++++------
 packages/theme-default/src/menu.css   |  2 +-
 7 files changed, 56 insertions(+), 53 deletions(-)

diff --git a/examples/docs/en-US/menu.md b/examples/docs/en-US/menu.md
index 8694dba26..5bd122a35 100644
--- a/examples/docs/en-US/menu.md
+++ b/examples/docs/en-US/menu.md
@@ -77,6 +77,10 @@ Vertical NavMenu with sub-menus.
         <el-menu-item-group title="Group Two">
           <el-menu-item index="1-3">item three</el-menu-item>
         </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">item four</template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-submenu>
       </el-submenu>
       <el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item>
       <el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item>
@@ -94,6 +98,10 @@ Vertical NavMenu with sub-menus.
         <el-menu-item-group title="Group Two">
           <el-menu-item index="1-3">item three</el-menu-item>
         </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">item four</template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-submenu>
       </el-submenu>
       <el-menu-item index="2">Navigator Two</el-menu-item>
       <el-menu-item index="3">Navigator Three</el-menu-item>
@@ -109,16 +117,6 @@ Vertical NavMenu with sub-menus.
       <el-menu-item-group title="Group Two">
         <el-menu-item index="3"><i class="el-icon-message"></i>Navigator Three</el-menu-item>
         <el-menu-item index="4"><i class="el-icon-message"></i>Navigator Four</el-menu-item>
-          <!-- <el-submenu index="5">
-            <template slot="title">Navigator Five</template>
-            <el-menu-item-group title="Group One">
-              <el-menu-item index="5-1">item one</el-menu-item>
-              <el-menu-item index="5-2">item two</el-menu-item>
-            </el-menu-item-group>
-            <el-menu-item-group title="Group Two">
-              <el-menu-item index="5-3">item three</el-menu-item>
-            </el-menu-item-group>
-          </el-submenu> -->
       </el-menu-item-group>
     </el-menu>
   </el-col>
diff --git a/examples/docs/zh-CN/menu.md b/examples/docs/zh-CN/menu.md
index e9ee70f9c..1506b17c1 100644
--- a/examples/docs/zh-CN/menu.md
+++ b/examples/docs/zh-CN/menu.md
@@ -108,6 +108,10 @@
         <el-menu-item-group title="分组2">
           <el-menu-item index="1-3">选项3</el-menu-item>
         </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="1-4-1">选项1</el-menu-item>
+        </el-submenu>
       </el-submenu>
       <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
       <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
@@ -125,6 +129,10 @@
         <el-menu-item-group title="分组2">
           <el-menu-item index="1-3">选项3</el-menu-item>
         </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="1-4-1">选项1</el-menu-item>
+        </el-submenu>
       </el-submenu>
       <el-menu-item index="2">导航二</el-menu-item>
       <el-menu-item index="3">导航三</el-menu-item>
@@ -140,16 +148,6 @@
       <el-menu-item-group title="分组二">
         <el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>
         <el-menu-item index="4"><i class="el-icon-message"></i>导航四</el-menu-item>
-        <!-- <el-submenu index="5">
-          <template slot="title">导航五</template>
-          <el-menu-item-group title="分组一">
-            <el-menu-item index="5-1">选项1</el-menu-item>
-            <el-menu-item index="5-2">选项2</el-menu-item>
-          </el-menu-item-group>
-          <el-menu-item-group title="分组二">
-            <el-menu-item index="5-3">选项3</el-menu-item>
-          </el-menu-item-group>
-        </el-submenu> -->
       </el-menu-item-group>
     </el-menu>
   </el-col>
diff --git a/packages/menu/src/menu-item-group.vue b/packages/menu/src/menu-item-group.vue
index 200edcae1..80d8903ac 100644
--- a/packages/menu/src/menu-item-group.vue
+++ b/packages/menu/src/menu-item-group.vue
@@ -14,31 +14,26 @@
         paddingLeft: 20
       };
     },
-    methods: {
-      initPadding() {
-        var parent = this.$parent;
-        var level = 0;
-        var component = parent.$options.componentName;
-
-        while (component !== 'ElMenu') {
-          if (component === 'ElSubmenu') {
-            level++;
+    computed: {
+      levelPadding() {
+        let padding = 10;
+        let parent = this.$parent;
+        while (parent && parent.$options.componentName !== 'ElMenu') {
+          if (parent.$options.componentName === 'ElSubmenu') {
+            padding += 20;
           }
           parent = parent.$parent;
-          component = parent.$options.componentName;
         }
-        this.paddingLeft += level * 10;
+        padding === 10 && (padding = 20);
+        return padding;
       }
-    },
-    mounted() {
-      this.initPadding();
     }
   };
 </script>
 
 <template>
   <li class="el-menu-item-group">
-    <div class="el-menu-item-group__title" :style="{'padding-left': paddingLeft + 'px'}">
+    <div class="el-menu-item-group__title" :style="{paddingLeft: levelPadding + 'px'}">
       <template v-if="!$slots.title">{{title}}</template>
       <slot v-else name="title"></slot>
     </div>
diff --git a/packages/menu/src/menu-item.vue b/packages/menu/src/menu-item.vue
index 4278106e3..decc81c61 100644
--- a/packages/menu/src/menu-item.vue
+++ b/packages/menu/src/menu-item.vue
@@ -1,3 +1,14 @@
+<template>
+  <li class="el-menu-item"
+    :style="paddingStyle"
+    @click="handleClick"
+    :class="{
+      'is-active': active,
+      'is-disabled': disabled
+    }">
+    <slot></slot>
+  </li>
+</template>
 <script>
   import Menu from './menu-mixin';
   module.exports = {
@@ -41,14 +52,3 @@
     }
   };
 </script>
-
-<template>
-  <li class="el-menu-item"
-    @click="handleClick"
-    :class="{
-      'is-active': active,
-      'is-disabled': disabled
-    }">
-    <slot></slot>
-  </li>
-</template>
diff --git a/packages/menu/src/menu-mixin.js b/packages/menu/src/menu-mixin.js
index 62ad40f64..e8095b492 100644
--- a/packages/menu/src/menu-mixin.js
+++ b/packages/menu/src/menu-mixin.js
@@ -17,6 +17,19 @@ module.exports = {
         parent = parent.$parent;
       }
       return parent;
+    },
+    paddingStyle() {
+      if (this.rootMenu.mode !== 'vertical') return {};
+
+      let padding = 20;
+      let parent = this.$parent;
+      while (parent && parent.$options.componentName !== 'ElMenu') {
+        if (parent.$options.componentName === 'ElSubmenu') {
+          padding += 20;
+        }
+        parent = parent.$parent;
+      }
+      return {paddingLeft: padding + 'px'};
     }
   }
 };
diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue
index ea90f7a3a..4eaf81c13 100644
--- a/packages/menu/src/submenu.vue
+++ b/packages/menu/src/submenu.vue
@@ -6,14 +6,13 @@
       'is-opened': opened
     }"
   >
-    <div class="el-submenu__title" ref="submenu-title">
-
+    <div class="el-submenu__title" ref="submenu-title" :style="paddingStyle">
       <slot name="title"></slot>
       <i :class="{
-          'el-submenu__icon-arrow': true,
-          'el-icon-arrow-down': rootMenu.mode === 'vertical',
-          'el-icon-caret-bottom': rootMenu.mode === 'horizontal'
-        }">
+        'el-submenu__icon-arrow': true,
+        'el-icon-arrow-down': rootMenu.mode === 'vertical',
+        'el-icon-caret-bottom': rootMenu.mode === 'horizontal'
+      }">
       </i>
     </div>
     <transition :name="rootMenu.mode === 'horizontal' ? 'el-zoom-in-top' : ''">
diff --git a/packages/theme-default/src/menu.css b/packages/theme-default/src/menu.css
index 3bc891f11..2c69bda4a 100644
--- a/packages/theme-default/src/menu.css
+++ b/packages/theme-default/src/menu.css
@@ -189,7 +189,7 @@
       }
     }
     @when opened {
-      .el-submenu__icon-arrow {
+      > .el-submenu__title .el-submenu__icon-arrow {
         transform: rotateZ(180deg);
       }
     }