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

Add logical treatment to 'accordion'

Browse source
This commit is contained in:
zhigang.li 2018-01-15 14:45:50 +08:00
parent 3e3fba0ec2
commit a163daa07a
4 changed files with 38 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
examples/routers/menu.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<Menu :theme="theme1" active-name="1" @on-select="handleSelect" @on-open-change="handleOpen" :open-names="openArr">
<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
@ -41,6 +41,22 @@
</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">

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);
}
}

4
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" :style="titleStyle">
<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>
@ -112,7 +112,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;
});
}

10
src/utils/assist.js
View file

@ -228,6 +228,16 @@ export function findComponentsUpward (context, componentName) {
}
}
// 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, '');