mirror of https://github.com/ElemeFE/element
add suport for mutil level submenu
baiyaaaaa
杨奕
parent
e7e104df5d
commit
4fa158eb32
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,14 +6,13 @@
|
|||
'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,
|
||||
'el-icon-arrow-down': rootMenu.mode === 'vertical',
|
||||
'el-icon-caret-bottom': rootMenu.mode === 'horizontal'
|
||||
}">
|
||||
'el-submenu__icon-arrow': true,
|
||||
'el-icon-arrow-down': rootMenu.mode === 'vertical',
|
||||
'el-icon-caret-bottom': rootMenu.mode === 'horizontal'
|
||||
}">
|
||||
</i>
|
||||
</div>
|
||||
<transition :name="rootMenu.mode === 'horizontal' ? 'el-zoom-in-top' : ''">
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@
|
|||
}
|
||||
}
|
||||
@when opened {
|
||||
.el-submenu__icon-arrow {
|
||||
> .el-submenu__title .el-submenu__icon-arrow {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue