github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

add suport for mutil level submenu

pull/1857/head
baiyaaaaa 2016-12-19 23:45:40 +08:00 committed by 杨奕
parent e7e104df5d
commit 4fa158eb32
7 changed files with 56 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -77,6 +77,10 @@ Vertical NavMenu with sub-menus.
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item>
@ -94,6 +98,10 @@ Vertical NavMenu with sub-menus.
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">Navigator Two</el-menu-item>
<el-menu-item index="3">Navigator Three</el-menu-item>
@ -109,16 +117,6 @@ Vertical NavMenu with sub-menus.
<el-menu-item-group title="Group Two">
<el-menu-item index="3"><i class="el-icon-message"></i>Navigator Three</el-menu-item>
<el-menu-item index="4"><i class="el-icon-message"></i>Navigator Four</el-menu-item>
<!-- <el-submenu index="5">
<template slot="title">Navigator Five</template>
<el-menu-item-group title="Group One">
<el-menu-item index="5-1">item one</el-menu-item>
<el-menu-item index="5-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="5-3">item three</el-menu-item>
</el-menu-item-group>
</el-submenu> -->
</el-menu-item-group>
</el-menu>
</el-col>

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

@ -108,6 +108,10 @@
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
@ -125,6 +129,10 @@
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">导航二</el-menu-item>
<el-menu-item index="3">导航三</el-menu-item>
@ -140,16 +148,6 @@
<el-menu-item-group title="分组二">
<el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>
<el-menu-item index="4"><i class="el-icon-message"></i>导航四</el-menu-item>
<!-- <el-submenu index="5">
<template slot="title">导航五</template>
<el-menu-item-group title="分组一">
<el-menu-item index="5-1">选项1</el-menu-item>
<el-menu-item index="5-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组二">
<el-menu-item index="5-3">选项3</el-menu-item>
</el-menu-item-group>
</el-submenu> -->
</el-menu-item-group>
</el-menu>
</el-col>

25
packages/menu/src/menu-item-group.vue
View File

@ -14,31 +14,26 @@
paddingLeft: 20
};
},
methods: {
initPadding() {
var parent = this.$parent;
var level = 0;
var component = parent.$options.componentName;
while (component !== 'ElMenu') {
if (component === 'ElSubmenu') {
level++;
computed: {
levelPadding() {
let padding = 10;
let parent = this.$parent;
while (parent && parent.$options.componentName !== 'ElMenu') {
if (parent.$options.componentName === 'ElSubmenu') {
padding += 20;
}
parent = parent.$parent;
component = parent.$options.componentName;
}
this.paddingLeft += level * 10;
padding === 10 && (padding = 20);
return padding;
}
},
mounted() {
this.initPadding();
}
};
</script>
<template>
<li class="el-menu-item-group">
<div class="el-menu-item-group__title" :style="{'padding-left': paddingLeft + 'px'}">
<div class="el-menu-item-group__title" :style="{paddingLeft: levelPadding + 'px'}">
<template v-if="!$slots.title">{{title}}</template>
<slot v-else name="title"></slot>
</div>

22
packages/menu/src/menu-item.vue
View File

@ -1,3 +1,14 @@
<template>
<li class="el-menu-item"
:style="paddingStyle"
@click="handleClick"
:class="{
'is-active': active,
'is-disabled': disabled
}">
<slot></slot>
</li>
</template>
<script>
import Menu from './menu-mixin';
module.exports = {
@ -41,14 +52,3 @@
}
};
</script>
<template>
<li class="el-menu-item"
@click="handleClick"
:class="{
'is-active': active,
'is-disabled': disabled
}">
<slot></slot>
</li>
</template>

13
packages/menu/src/menu-mixin.js
View File

@ -17,6 +17,19 @@ module.exports = {
parent = parent.$parent;
}
return parent;
},
paddingStyle() {
if (this.rootMenu.mode !== 'vertical') return {};
let padding = 20;
let parent = this.$parent;
while (parent && parent.$options.componentName !== 'ElMenu') {
if (parent.$options.componentName === 'ElSubmenu') {
padding += 20;
}
parent = parent.$parent;
}
return {paddingLeft: padding + 'px'};
}
}
};

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

@ -6,8 +6,7 @@
'is-opened': opened
}"
>
<div class="el-submenu__title" ref="submenu-title">
<div class="el-submenu__title" ref="submenu-title" :style="paddingStyle">
<slot name="title"></slot>
<i :class="{
'el-submenu__icon-arrow': true,

2
packages/theme-default/src/menu.css
View File

@ -189,7 +189,7 @@
}
}
@when opened {
.el-submenu__icon-arrow {
> .el-submenu__title .el-submenu__icon-arrow {
transform: rotateZ(180deg);
}
}