drip-public/iview
5
0
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
Download patch file Download diff file Expand all files Collapse all files

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

@ -220,7 +220,7 @@
}
getSelections(this.data);
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 => {
item.display = item.display.replace(new RegExp(this.query, 'g'), `<span>${this.query}</span>`);
return item;

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

@ -1,8 +1,9 @@
<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, findComponentsUpward } from '../../utils/assist';
const prefixCls = 'ivu-menu';
export default {
@ -33,18 +34,24 @@
[`${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: {
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 +64,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;
}

25
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="handleClick" :style="titleStyle">
<slot name="title"></slot>
<Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
</div>
@ -21,7 +21,7 @@
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, findComponentsUpward, findComponentsDownward } from '../../utils/assist';
import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-menu';
@ -54,9 +54,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 +73,17 @@
if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
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: {
@ -131,6 +144,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;
});
}