fixed the bug about styles when mode is 'horizontal' of menu
This commit is contained in:
parent
6b4e738352
commit
b2d676bd83
5 changed files with 28 additions and 14 deletions
|
@ -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>
|
||||||
|
|
|
@ -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'
|
||||||
} : {};
|
} : {};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'
|
||||||
} : {};
|
} : {};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
|
@ -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: {
|
||||||
|
|
Loading…
Add table
Reference in a new issue