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

make menu support more than 2 levels

Browse source
This commit is contained in:
zhigang.li 2018-01-15 13:17:58 +08:00
parent 3537176f98
commit 4bce764525
7 changed files with 117 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
examples/routers/menu.vue
View file

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

2
src/components/cascader/cascader.vue
View file

@ -220,7 +220,7 @@
} }
getSelections(this.data); getSelections(this.data);
selections = selections.filter(item => { selections = selections.filter(item => {
return item.label ? item.label.indexOf(this.query) > -1 : false return item.label ? item.label.indexOf(this.query) > -1 : false;
}).map(item => { }).map(item => {
item.display = item.display.replace(new RegExp(this.query, 'g'), `<span>${this.query}</span>`); item.display = item.display.replace(new RegExp(this.query, 'g'), `<span>${this.query}</span>`);
return item; return item;

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

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

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

@ -1,6 +1,6 @@
<template> <template>
<li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"> <li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
<div :class="[prefixCls + '-submenu-title']" ref="reference" @click="handleClick"> <div :class="[prefixCls + '-submenu-title']" ref="reference" @click="handleClick" :style="titleStyle">
<slot name="title"></slot> <slot name="title"></slot>
<Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon> <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
</div> </div>
@ -21,7 +21,7 @@
import Drop from '../select/dropdown.vue'; import Drop from '../select/dropdown.vue';
import Icon from '../icon/icon.vue'; import Icon from '../icon/icon.vue';
import CollapseTransition from '../base/collapse-transition'; import CollapseTransition from '../base/collapse-transition';
import { getStyle, findComponentUpward } from '../../utils/assist'; import { getStyle, findComponentUpward, findComponentsUpward, findComponentsDownward } from '../../utils/assist';
import Emitter from '../../mixins/emitter'; import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-menu'; const prefixCls = 'ivu-menu';
@ -54,9 +54,11 @@
return [ return [
`${prefixCls}-submenu`, `${prefixCls}-submenu`,
{ {
[`${prefixCls}-item-active`]: this.active, [`${prefixCls}-item-active`]: this.active && !this.hasParentSubmenu,
[`${prefixCls}-opened`]: this.opened, [`${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 +73,17 @@
if (this.dropWidth) style.minWidth = `${this.dropWidth}px`; if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
return style; return style;
},
hasParentSubmenu () {
return findComponentUpward(this, 'Submenu');
},
parentSubmenuNum () {
return findComponentsUpward(this, 'Submenu').length;
},
titleStyle () {
return this.hasParentSubmenu ? {
paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
} : {};
} }
}, },
methods: { methods: {
@ -131,6 +144,10 @@
return true; return true;
}); });
this.$on('on-update-active-name', (status) => { 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; this.active = status;
}); });
} }

24
src/locale/lang/hi-IN.js
View file

@ -48,18 +48,18 @@ const lang = {
sat: 'शनिवार' sat: 'शनिवार'
}, },
months: { months: {
m1: 'जनवरी', m1: 'जनवरी',
m2: 'फरवरी', m2: 'फरवरी',
m3: 'मार्च', m3: 'मार्च',
m4: 'अप्रैल', m4: 'अप्रैल',
m5: 'मई', m5: 'मई',
m6: 'जून', m6: 'जून',
m7: 'जुलाई', m7: 'जुलाई',
m8: 'अगस्त', m8: 'अगस्त',
m9: 'सितंबर', m9: 'सितंबर',
m10: 'अक्टूबर', m10: 'अक्टूबर',
m11: 'नवंबर', m11: 'नवंबर',
m12: 'दिसंबर' m12: 'दिसंबर'
} }
}, },
transfer: { transfer: {

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

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

11
src/utils/assist.js
View file

@ -217,6 +217,17 @@ 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 [];
}
}
/* istanbul ignore next */ /* istanbul ignore next */
const trim = function(string) { const trim = function(string) {
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, ''); return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');