drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

16
examples/routers/menu.vue
View file

@ -1,6 +1,6 @@
<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>

2
src/components/menu/menu-group.vue
View file

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

2
src/components/menu/menu-item.vue
View file

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

8
src/components/menu/mixin.js
View file

@ -1,11 +1,19 @@
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;
}
}
};

14
src/components/menu/submenu.vue
View 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: {