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

This commit is contained in:
zhigang.li 2018-01-22 13:12:15 +08:00
parent 6b4e738352
commit b2d676bd83
5 changed files with 28 additions and 14 deletions

View file

@ -1,6 +1,6 @@
<template> <template>
<div> <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"> <Menu-item name="1">
<Icon type="ios-paper"></Icon> <Icon type="ios-paper"></Icon>
一级1 一级1
@ -16,7 +16,17 @@
</template> </template>
<Menu-item name="3-1">二级1</Menu-item> <Menu-item name="3-1">二级1</Menu-item>
<Menu-item name="3-2">二级2</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"> <template slot="title">
<Icon type="stats-bars"></Icon> <Icon type="stats-bars"></Icon>
二级3 二级3
@ -57,7 +67,7 @@
</template> </template>
<Menu-item name="3-4-1">三级1</Menu-item> <Menu-item name="3-4-1">三级1</Menu-item>
<Menu-item name="3-4-2">三级2</Menu-item> <Menu-item name="3-4-2">三级2</Menu-item>
</Submenu> </Submenu> -->
</Submenu> </Submenu>
<Menu-item name="4"> <Menu-item name="4">
<Icon type="settings"></Icon> <Icon type="settings"></Icon>

View file

@ -25,7 +25,7 @@
}, },
computed: { computed: {
groupStyle () { groupStyle () {
return this.hasParentSubmenu ? { return this.hasParentSubmenu && this.mode !== 'horizontal' ? {
paddingLeft: 43 + (this.parentSubmenuNum - 1) * 28 + 'px' paddingLeft: 43 + (this.parentSubmenuNum - 1) * 28 + 'px'
} : {}; } : {};
} }

View file

@ -37,7 +37,7 @@
]; ];
}, },
itemStyle () { itemStyle () {
return this.hasParentSubmenu ? { return this.hasParentSubmenu && this.mode !== 'horizontal' ? {
paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px' paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
} : {}; } : {};
} }

View file

@ -1,11 +1,19 @@
import { findComponentUpward, findComponentsUpward } from '../../utils/assist'; import { findComponentUpward, findComponentsUpward } from '../../utils/assist';
export default { export default {
data () {
return {
menu: findComponentUpward(this, 'Menu')
};
},
computed: { computed: {
hasParentSubmenu () { hasParentSubmenu () {
return findComponentUpward(this, 'Submenu'); return findComponentUpward(this, 'Submenu');
}, },
parentSubmenuNum () { parentSubmenuNum () {
return findComponentsUpward(this, 'Submenu').length; return findComponentsUpward(this, 'Submenu').length;
},
mode () {
return this.menu.mode;
} }
} }
}; };

View file

@ -46,8 +46,7 @@
prefixCls: prefixCls, prefixCls: prefixCls,
active: false, active: false,
opened: false, opened: false,
dropWidth: parseFloat(getStyle(this.$el, 'width')), dropWidth: parseFloat(getStyle(this.$el, 'width'))
parent: findComponentUpward(this, 'Menu')
}; };
}, },
computed: { computed: {
@ -63,11 +62,8 @@
} }
]; ];
}, },
mode () {
return this.parent.mode;
},
accordion () { accordion () {
return this.parent.accordion; return this.menu.accordion;
}, },
dropStyle () { dropStyle () {
let style = {}; let style = {};
@ -88,7 +84,7 @@
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.parent.updateOpenKeys(this.name); this.menu.updateOpenKeys(this.name);
this.opened = true; this.opened = true;
}, 250); }, 250);
}, },
@ -98,7 +94,7 @@
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.parent.updateOpenKeys(this.name); this.menu.updateOpenKeys(this.name);
this.opened = false; this.opened = false;
}, 150); }, 150);
}, },
@ -112,7 +108,7 @@
}); });
} }
this.opened = !opened; this.opened = !opened;
this.parent.updateOpenKeys(this.name); this.menu.updateOpenKeys(this.name);
} }
}, },
watch: { watch: {