test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-02 04:08:10 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Menu: support multi level submenu in horizontal mode (#9741)

Browse Source
This commit is contained in:
baiyaaaaa 2018-02-09 11:05:37 +08:00 committed by 杨奕
parent fe29af1b1f
commit 202f6417b1
4 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/docs/en-US/menu.md
View File

@ -68,6 +68,12 @@ Top bar NavMenu can be used in a variety of scenarios.
<el-menu-item index="2-1">item one</el-menu-item>
<el-menu-item index="2-2">item two</el-menu-item>
<el-menu-item index="2-3">item three</el-menu-item>
<el-submenu index="2-4">
<template slot="title">item four</template>
<el-menu-item index="2-4-1">item one</el-menu-item>
<el-menu-item index="2-4-2">item two</el-menu-item>
<el-menu-item index="2-4-3">item three</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
</el-menu>
@ -86,6 +92,12 @@ Top bar NavMenu can be used in a variety of scenarios.
<el-menu-item index="2-1">item one</el-menu-item>
<el-menu-item index="2-2">item two</el-menu-item>
<el-menu-item index="2-3">item three</el-menu-item>
<el-submenu index="2-4">
<template slot="title">item four</template>
<el-menu-item index="2-4-1">item one</el-menu-item>
<el-menu-item index="2-4-2">item two</el-menu-item>
<el-menu-item index="2-4-3">item three</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
</el-menu>

12
examples/docs/zh-CN/menu.md
View File

@ -69,6 +69,12 @@
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
@ -87,6 +93,12 @@
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>

19
packages/menu/src/submenu.vue
View File

@ -193,7 +193,9 @@
title && (title.style.backgroundColor = this.rootMenu.backgroundColor || '');
},
updatePlacement() {
this.currentPlacement = this.mode === 'horizontal' ? 'bottom-start' : 'right-start';
this.currentPlacement = this.mode === 'horizontal' && this.rootMenu === this.$parent
? 'bottom-start'
: 'right-start';
},
initPopper() {
this.referenceElm = this.$el;
@ -225,7 +227,8 @@
currentPlacement,
menuTransitionName,
mode,
popperClass
popperClass,
$parent
} = this;
const popupMenu = (
@ -259,6 +262,11 @@
</el-collapse-transition>
);
const submenuTitleIcon = (
rootMenu.mode === 'horizontal' && $parent === rootMenu ||
rootMenu.mode === 'vertical' && !rootMenu.collapse
) ? 'el-icon-arrow-down' : 'el-icon-arrow-right';
return (
<li
class={{
@ -282,12 +290,7 @@
style={[paddingStyle, titleStyle, { backgroundColor }]}
>
{$slots.title}
<i class={{
'el-submenu__icon-arrow': true,
'el-icon-arrow-down': rootMenu.mode === 'horizontal' || rootMenu.mode === 'vertical' && !rootMenu.collapse,
'el-icon-arrow-right': rootMenu.mode === 'vertical' && rootMenu.collapse
}}>
</i>
<i class={[ 'el-submenu__icon-arrow', submenuTitleIcon ]}></i>
</div>
{this.isMenuPopup ? popupMenu : inlineMenu}
</li>

3
packages/theme-chalk/src/menu.scss
View File

@ -81,7 +81,8 @@
}
}
& .el-menu {
& .el-menu-item {
& .el-menu-item,
& .el-submenu__title {
background-color: $--color-white;
float: none;
height: 36px;