add suport for mutil level submenu

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>

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>

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>

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>

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'};
     }
   }
 };

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' : ''">

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);
       }
     }