add menu-list

packages/menu/src/menu-list.vue

@@ -0,0 +1,96 @@
+<script>
+import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
+import menuMixin from './menu-mixin';
+import Popper from 'element-ui/src/utils/vue-popper';
+
+export default {
+  name: 'ElMenuList',
+
+  mixins: [menuMixin, Popper],
+
+  components: { ElCollapseTransition },
+
+  computed: {
+    menuTransitionName() {
+      return this.rootMenu.collapse ? 'el-zoom-in-left' : 'el-zoom-in-top';
+    }
+  },
+
+  props: {
+    transformOrigin: {
+      type: [Boolean, String],
+      default: false
+    },
+    menuPopup: {
+      type: Boolean,
+      default: false
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  watch: {
+    visible(val) {
+      if (this.menuPopup) {
+        this.$nextTick(_ => {
+          this.showPopper = val;
+        });
+      }
+    }
+  },
+
+  methods: {
+    initPopper() {
+      this.referenceElm = this.$parent.$el;
+      this.popperElm = this.$el;
+    }
+  },
+
+  mounted() {
+    this.initPopper();
+  },
+
+  render(h) {
+    const {
+      rootMenu,
+      placement,
+      $slots,
+      visible
+    } = this;
+
+    const popupMenu = (
+      <transition name={this.menuTransitionName}>
+        <div
+          ref="menu"
+          v-show={visible}
+          class={[`el-menu--${rootMenu.mode}`]}
+          on-mouseenter={() => { this.$emit('mouseenter'); }}
+          on-mouseleave={() => { this.$emit('mouseleave'); }}
+          on-focus={() => { this.$emit('mouseenter'); }}>
+          <ul
+            role="menu"
+            class={['el-menu el-menu--popup', `el-menu--popup-${placement}`]}
+            style={{ backgroundColor: rootMenu.backgroundColor || '' }}>
+            {$slots.default}
+          </ul>
+        </div>
+      </transition>
+    );
+
+    const inlineMenu = (
+      <el-collapse-transition>
+        <ul
+          v-show={visible}
+          role="menu"
+          class="el-menu el-menu--inline"
+          style={{ backgroundColor: rootMenu.backgroundColor || '' }}>
+          {$slots.default}
+        </ul>
+      </el-collapse-transition>
+    );
+    return this.menuPopup ? popupMenu : inlineMenu;
+  }
+}
+</script>

packages/menu/src/submenu.vue

@@ -3,6 +3,7 @@
   import menuMixin from './menu-mixin';
   import Emitter from 'element-ui/src/mixins/emitter';
   import Popper from 'element-ui/src/utils/vue-popper';
+  import MenuList from './menu-list';
 
   export default {
     name: 'ElSubmenu',
@@ -11,13 +12,9 @@
 
     mixins: [menuMixin, Emitter, Popper],
 
-    components: { ElCollapseTransition },
+    components: { ElCollapseTransition, MenuList },
 
     props: {
-      transformOrigin: {
-        type: [Boolean, String],
-        default: false
-      },
       index: {
         type: String,
         required: true
@@ -105,17 +102,12 @@
             ? this.activeTextColor
             : this.textColor
         };
+      },
+      popperPlacement() {
+        return this.mode === 'horizontal' ? 'bottom-start' : 'right-start';
       }
     },
     methods: {
-      handleCollapseToggle(value) {
-        if (value) {
-          this.initPopper();
-        } else {
-          this.doDestroy();
-          document.body.removeChild(this.popperElm);
-        }
-      },
       addItem(item) {
         this.$set(this.items, item.index, item);
       },
@@ -173,23 +165,11 @@
         if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
         const title = this.$refs['submenu-title'];
         title && (title.style.backgroundColor = this.rootMenu.backgroundColor || '');
-      },
-      updatePlacement() {
-        this.currentPlacement = this.mode === 'horizontal' ? 'bottom-start' : 'right-start';
-      },
-      initPopper() {
-        this.referenceElm = this.$el;
-        this.popperElm = this.$refs.menu;
-        this.updatePlacement();
       }
     },
     created() {
       this.parentMenu.addSubmenu(this);
       this.rootMenu.addSubmenu(this);
-      this.$on('toggle-collapse', this.handleCollapseToggle);
-    },
-    mounted() {
-      this.initPopper();
     },
     beforeDestroy() {
       this.parentMenu.removeSubmenu(this);
@@ -204,42 +184,10 @@
         backgroundColor,
         $slots,
         rootMenu,
-        currentPlacement,
+        isMenuPopup,
-        menuTransitionName,
         mode
       } = this;
 
-      const popupMenu = (
-        <transition name={menuTransitionName}>
-          <div
-            ref="menu"
-            v-show={opened}
-            class={[`el-menu--${mode}`]}
-            on-mouseenter={this.handleMouseenter}
-            on-mouseleave={this.handleMouseleave}
-            on-focus={this.handleMouseenter}>
-            <ul
-              role="menu"
-              class={['el-menu el-menu--popup', `el-menu--popup-${currentPlacement}`]}
-              style={{ backgroundColor: rootMenu.backgroundColor || '' }}>
-              {$slots.default}
-            </ul>
-          </div>
-        </transition>
-      );
-
-      const inlineMenu = (
-        <el-collapse-transition>
-          <ul
-            role="menu"
-            class="el-menu el-menu--inline"
-            v-show={opened}
-            style={{ backgroundColor: rootMenu.backgroundColor || '' }}>
-            {$slots.default}
-          </ul>
-        </el-collapse-transition>
-      );
-
       return (
         <li
           class={{
@@ -270,7 +218,15 @@
             }}>
             </i>
           </div>
-          {this.isMenuPopup ? popupMenu : inlineMenu}
+          <MenuList
+            visible={opened}
+            menu-popup={isMenuPopup}
+            append-to-body={isMenuPopup && this.$parent === rootMenu}
+            placement={this.popperPlacement}
+            on-mouseenter={this.handleMouseenter}
+            on-mouseleave={this.handleMouseleave}>
+            {$slots.default}
+          </MenuList>
         </li>
       );
     }

packages/theme-chalk/src/menu.scss

@@ -103,6 +103,9 @@
       border-bottom: 2px solid $--color-primary;
       color: $--color-text-primary;
     }
+    & .el-menu--popup {
+      padding: 5px 0;
+    }
   }
   @include m(collapse) {
     width: 64px;
@@ -159,10 +162,9 @@
     z-index: 100;
     min-width: 200px;
     border: none;
-    padding: 5px 0;
     border-radius: $--border-radius-small;
     box-shadow: $--box-shadow-light;
-    overflow: hidden;
+    // overflow: hidden;
 
     &-bottom-start {
       margin-top: 5px;