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

Merge pull request #2822 from lison16/menu

Browse source 
make menu support more than 2 levels
This commit is contained in:
Aresn 2018-01-22 11:53:58 +08:00 • committed by GitHub
commit b4c3794697
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 168 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
examples/routers/menu.vue
View file

@ -1,32 +1,67 @@
<template>
<div>
<Menu mode="horizontal" :theme="theme1" active-name="1">
<Menu :theme="theme1" active-name="1" accordion @on-select="handleSelect" @on-open-change="handleOpen" :open-names="openArr">
<Menu-item name="1">
<Icon type="ios-paper"></Icon>
内容管理
一级1
</Menu-item>
<Menu-item name="2">
<Icon type="ios-people"></Icon>
用户管理
一级2
</Menu-item>
<Submenu name="3">
<template slot="title">
<Icon type="stats-bars"></Icon>
统计分析
<Icon type="ios-people"></Icon>
一级3
</template>
<Menu-group title="使用">
<Menu-item name="3-1">新增和启动</Menu-item>
<Menu-item name="3-2">活跃分析</Menu-item>
<Menu-item name="3-3">时段分析</Menu-item>
</Menu-group>
<Menu-group title="留存">
<Menu-item name="3-4">用户留存</Menu-item>
<Menu-item name="3-5">流失用户</Menu-item>
</Menu-group>
<Menu-item name="3-1">二级1</Menu-item>
<Menu-item name="3-2">二级2</Menu-item>
<Submenu name="3-3">
<template slot="title">
<Icon type="stats-bars"></Icon>
二级3
</template>
<Menu-item name="3-3-1">三级1</Menu-item>
<Menu-item name="3-3-2">三级2</Menu-item>
<Submenu name="3-3-3">
<template slot="title">
<Icon type="stats-bars"></Icon>
三级3
</template>
<Menu-item name="3-3-3-1">四级1</Menu-item>
<Menu-item name="3-3-3-2">四级2</Menu-item>
<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>
<Submenu name="3-3-4">
<template slot="title">
<Icon type="stats-bars"></Icon>
三级4
</template>
<Menu-item name="3-3-4-1">四级1</Menu-item>
<Menu-item name="3-3-4-2">四级2</Menu-item>
</Submenu>
</Submenu>
<Submenu name="3-4">
<template slot="title">
<Icon type="stats-bars"></Icon>
二级4
</template>
<Menu-item name="3-4-1">三级1</Menu-item>
<Menu-item name="3-4-2">三级2</Menu-item>
</Submenu>
</Submenu>
<Menu-item name="4">
<Icon type="settings"></Icon>
综合设置
一级4
</Menu-item>
</Menu>
<br>
@ -43,9 +78,20 @@
export default {
data () {
return {
theme1: 'light',
value4: ''
theme1: 'dark',
value4: '',
openArr: ['3', '3-3', '3-3-3']
};
},
methods: {
handleSelect (name) {
// console.log(name);
return name;
},
handleOpen (openArr) {
// console.log(openArr);
return openArr;
}
}
}
};
</script>

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

@ -1,10 +1,11 @@
<template>
<li :class="[prefixCls + '-item-group']">
<div :class="[prefixCls + '-item-group-title']">{{ title }}</div>
<div :class="[prefixCls + '-item-group-title']" :style="groupStyle">{{ title }}</div>
<ul><slot></slot></ul>
</li>
</template>
<script>
import { findComponentUpward, findComponentsUpward } from '../../utils/assist';
const prefixCls = 'ivu-menu';
export default {
@ -19,6 +20,19 @@
return {
prefixCls: prefixCls
};
},
computed: {
parentSubmenuNum () {
return findComponentsUpward(this, 'Submenu').length;
},
hasParentSubmenu () {
return findComponentUpward(this, 'Submenu');
},
groupStyle () {
return this.hasParentSubmenu ? {
paddingLeft: 43 + (this.parentSubmenuNum - 1) * 28 + 'px'
} : {};
}
}
};
</script>

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

@ -1,13 +1,15 @@
<template>
<li :class="classes" @click.stop="handleClick"><slot></slot></li>
<li :class="classes" @click.stop="handleClick" :style="itemStyle"><slot></slot></li>
</template>
<script>
import Emitter from '../../mixins/emitter';
import { findComponentUpward } from '../../utils/assist';
const prefixCls = 'ivu-menu';
import mixin from './mixin';
export default {
name: 'MenuItem',
mixins: [ Emitter ],
mixins: [ Emitter, mixin ],
props: {
name: {
type: [String, Number],
@ -33,18 +35,18 @@
[`${prefixCls}-item-disabled`]: this.disabled
}
];
},
itemStyle () {
return this.hasParentSubmenu ? {
paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
} : {};
}
},
methods: {
handleClick () {
if (this.disabled) return;
let parent = this.$parent;
let name = parent.$options.name;
while (parent && (!name || name !== 'Submenu')) {
parent = parent.$parent;
if (parent) name = parent.$options.name;
}
let parent = findComponentUpward(this, 'Submenu');
if (parent) {
this.dispatch('Submenu', 'on-menu-item-select', this.name);
@ -57,7 +59,7 @@
this.$on('on-update-active-name', (name) => {
if (this.name === name) {
this.active = true;
this.dispatch('Submenu', 'on-update-active-name', true);
this.dispatch('Submenu', 'on-update-active-name', name);
} else {
this.active = false;
}

11
src/components/menu/menu.vue
View file

@ -2,7 +2,7 @@
<ul :class="classes" :style="styles"><slot></slot></ul>
</template>
<script>
import { oneOf, findComponentsDownward } from '../../utils/assist';
import { oneOf, findComponentsDownward, findBrothersComponents } from '../../utils/assist';
import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-menu';
@ -82,7 +82,14 @@
} else {
this.openNames.push(name);
if (this.accordion) {
this.openNames.splice(0, this.openNames.length);
let currentSubmenu = {};
findComponentsDownward(this, 'Submenu').forEach(item => {
if (item.name === name) currentSubmenu = item;
});
findBrothersComponents(currentSubmenu, 'Submenu').forEach(item => {
let index = this.openNames.indexOf(item.name);
this.openNames.splice(index, index >= 0 ? 1 : 0);
});
this.openNames.push(name);
}
}

11
src/components/menu/mixin.js Normal file
View file

@ -0,0 +1,11 @@
import { findComponentUpward, findComponentsUpward } from '../../utils/assist';
export default {
computed: {
hasParentSubmenu () {
return findComponentUpward(this, 'Submenu');
},
parentSubmenuNum () {
return findComponentsUpward(this, 'Submenu').length;
}
}
};

24
src/components/menu/submenu.vue
View file

@ -1,6 +1,6 @@
<template>
<li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
<div :class="[prefixCls + '-submenu-title']" ref="reference" @click="handleClick">
<div :class="[prefixCls + '-submenu-title']" ref="reference" @click.stop="handleClick" :style="titleStyle">
<slot name="title"></slot>
<Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
</div>
@ -21,14 +21,15 @@
import Drop from '../select/dropdown.vue';
import Icon from '../icon/icon.vue';
import CollapseTransition from '../base/collapse-transition';
import { getStyle, findComponentUpward } from '../../utils/assist';
import { getStyle, findComponentUpward, findComponentsDownward } from '../../utils/assist';
import Emitter from '../../mixins/emitter';
import mixin from './mixin';
const prefixCls = 'ivu-menu';
export default {
name: 'Submenu',
mixins: [ Emitter ],
mixins: [ Emitter, mixin ],
components: { Icon, Drop, CollapseTransition },
props: {
name: {
@ -54,9 +55,11 @@
return [
`${prefixCls}-submenu`,
{
[`${prefixCls}-item-active`]: this.active,
[`${prefixCls}-item-active`]: this.active && !this.hasParentSubmenu,
[`${prefixCls}-opened`]: this.opened,
[`${prefixCls}-submenu-disabled`]: this.disabled
[`${prefixCls}-submenu-disabled`]: this.disabled,
[`${prefixCls}-submenu-has-parent-submenu`]: this.hasParentSubmenu,
[`${prefixCls}-child-item-active`]: this.active
}
];
},
@ -71,6 +74,11 @@
if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
return style;
},
titleStyle () {
return this.hasParentSubmenu ? {
paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
} : {};
}
},
methods: {
@ -99,7 +107,7 @@
if (this.mode === 'horizontal') return;
const opened = this.opened;
if (this.accordion) {
this.parent.$children.forEach(item => {
this.$parent.$children.forEach(item => {
if (item.$options.name === 'Submenu') item.opened = false;
});
}
@ -131,6 +139,10 @@
return true;
});
this.$on('on-update-active-name', (status) => {
if (findComponentUpward(this, 'Submenu')) this.dispatch('Submenu', 'on-update-active-name', status);
if (findComponentsDownward(this, 'Submenu')) findComponentsDownward(this, 'Submenu').forEach(item => {
item.active = false;
});
this.active = status;
});
}

24
src/styles/components/menu.less
View file

@ -160,13 +160,18 @@
&-submenu-title-icon {
transition: transform @transition-time @ease-in-out;
}
&-opened &-submenu-title-icon{
&-opened > * > &-submenu-title-icon{
transform: rotate(180deg);
}
&-vertical &-submenu &-item{
padding-left: 43px;
}
&-vertical &-submenu{
&-nested{
padding-left: 20px;
}
.@{menu-prefix-cls}-item{
padding-left: 43px;
}
}
&-vertical &-item-group{
&-title{
height: 48px;
@ -217,7 +222,10 @@
background: @primary-color !important;
}
}
&-dark&-vertical &-item-active &-submenu-title{
// &-dark&-vertical &-item-active &-submenu-title{
// color: #fff;
// }
&-dark&-vertical &-child-item-active > &-submenu-title{
color: #fff;
}
@ -226,6 +234,12 @@
.@{menu-prefix-cls}-submenu-title{
background: @menu-dark-title;
}
.@{menu-prefix-cls}-submenu-has-parent-submenu{
.@{menu-prefix-cls}-submenu-title{
background: transparent;
}
}
}
}
.select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);

21
src/utils/assist.js
View file

@ -217,6 +217,27 @@ export function findComponentsDownward (context, componentName) {
}, []);
}
// Find components upward
export function findComponentsUpward (context, componentName) {
let parents = [];
if (context.$parent) {
if (context.$parent.$options.name === componentName) parents.push(context.$parent);
return parents.concat(findComponentsUpward(context.$parent, componentName));
} else {
return [];
}
}
// Find brothers components
export function findBrothersComponents (context, componentName) {
let res = context.$parent.$children.filter(item => {
return item.$options.name === componentName;
});
let index = res.indexOf(context);
res.splice(index, 1);
return res;
}
/* istanbul ignore next */
const trim = function(string) {
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');