fixed the bug about styles when mode is 'horizontal' of menu

zhigang.li
1 parent 6b4e7383
Showing 5 changed files with 28 additions and 14 deletions Show diff stats
examples/routers/menu.vue
src/components/menu/menu-group.vue
src/components/menu/menu-item.vue
src/components/menu/mixin.js
src/components/menu/submenu.vue
 <template>
     <div>
-        <Menu :theme="theme1" active-name="1" accordion @on-select="handleSelect" @on-open-change="handleOpen" :open-names="openArr">
+        <Menu :theme="theme1" mode="horizontal"  active-name="1" accordion @on-select="handleSelect" @on-open-change="handleOpen" :open-names="openArr">
             <Menu-item name="1">
                 <Icon type="ios-paper"></Icon>
                 一级1
@@ -16,7 +16,17 @@
                 </template>
                 <Menu-item name="3-1">二级1</Menu-item>
                 <Menu-item name="3-2">二级2</Menu-item>
-                <Submenu name="3-3">
+                <MenuGroup title="Menu-Group">
+                    <MenuItem name="3-3-3-3-1">
+                        <Icon type="document-text"></Icon>
+                        Group-item1
+                    </MenuItem>
+                    <MenuItem name="3-3-3-3-2">
+                        <Icon type="chatbubbles"></Icon>
+                        Group-item2
+                    </MenuItem>
+                </MenuGroup>
+                <!-- <Submenu name="3-3">
                     <template slot="title">
                         <Icon type="stats-bars"></Icon>
                         二级3
@@ -57,7 +67,7 @@
                     </template>
                     <Menu-item name="3-4-1">三级1</Menu-item>
                     <Menu-item name="3-4-2">三级2</Menu-item>
-                </Submenu>
+                </Submenu> -->
             </Submenu>
             <Menu-item name="4">
                 <Icon type="settings"></Icon>
@@ -25,7 +25,7 @@
         },
         computed: {
             groupStyle () {
-                return this.hasParentSubmenu ? {
+                return this.hasParentSubmenu && this.mode !== 'horizontal' ? {
                     paddingLeft: 43 + (this.parentSubmenuNum - 1) * 28 + 'px'
                 } : {};
             }
@@ -37,7 +37,7 @@
                 ];
             },
             itemStyle () {
-                return this.hasParentSubmenu ? {
+                return this.hasParentSubmenu && this.mode !== 'horizontal' ? {
                     paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
                 } : {};
             }
 import { findComponentUpward, findComponentsUpward } from '../../utils/assist';
 export default {
+    data () {
+        return {
+            menu: findComponentUpward(this, 'Menu')
+        };
+    },
     computed: {
         hasParentSubmenu () {
             return findComponentUpward(this, 'Submenu');
         },
         parentSubmenuNum () {
             return findComponentsUpward(this, 'Submenu').length;
+        },
+        mode () {
+            return this.menu.mode;
         }
     }
 };
 \ No newline at end of file
@@ -46,8 +46,7 @@
                 prefixCls: prefixCls,
                 active: false,
                 opened: false,
-                dropWidth: parseFloat(getStyle(this.$el, 'width')),
-                parent: findComponentUpward(this, 'Menu')
+                dropWidth: parseFloat(getStyle(this.$el, 'width'))
             };
         },
         computed: {
@@ -63,11 +62,8 @@
                     }
                 ];
             },
-            mode () {
-                return this.parent.mode;
-            },
             accordion () {
-                return this.parent.accordion;
+                return this.menu.accordion;
             },
             dropStyle () {
                 let style = {};
@@ -88,7 +84,7 @@
  
                 clearTimeout(this.timeout);
                 this.timeout = setTimeout(() => {
-                    this.parent.updateOpenKeys(this.name);
+                    this.menu.updateOpenKeys(this.name);
                     this.opened = true;
                 }, 250);
             },
@@ -98,7 +94,7 @@
  
                 clearTimeout(this.timeout);
                 this.timeout = setTimeout(() => {
-                    this.parent.updateOpenKeys(this.name);
+                    this.menu.updateOpenKeys(this.name);
                     this.opened = false;
                 }, 150);
             },
@@ -112,7 +108,7 @@
                     });
                 }
                 this.opened = !opened;
-                this.parent.updateOpenKeys(this.name);
+                this.menu.updateOpenKeys(this.name);
             }
         },
         watch: {