Add logical treatment to 'accordion'
This commit is contained in:
parent
3e3fba0ec2
commit
a163daa07a
4 changed files with 38 additions and 5 deletions
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<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">
|
<Menu-item name="1">
|
||||||
<Icon type="ios-paper"></Icon>
|
<Icon type="ios-paper"></Icon>
|
||||||
一级1
|
一级1
|
||||||
|
@ -41,6 +41,22 @@
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
</MenuGroup>
|
</MenuGroup>
|
||||||
</Submenu>
|
</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>
|
||||||
</Submenu>
|
</Submenu>
|
||||||
<Menu-item name="4">
|
<Menu-item name="4">
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<ul :class="classes" :style="styles"><slot></slot></ul>
|
<ul :class="classes" :style="styles"><slot></slot></ul>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { oneOf, findComponentsDownward } from '../../utils/assist';
|
import { oneOf, findComponentsDownward, findBrothersComponents } from '../../utils/assist';
|
||||||
import Emitter from '../../mixins/emitter';
|
import Emitter from '../../mixins/emitter';
|
||||||
|
|
||||||
const prefixCls = 'ivu-menu';
|
const prefixCls = 'ivu-menu';
|
||||||
|
@ -82,7 +82,14 @@
|
||||||
} else {
|
} else {
|
||||||
this.openNames.push(name);
|
this.openNames.push(name);
|
||||||
if (this.accordion) {
|
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);
|
this.openNames.push(name);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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" :style="titleStyle">
|
<div :class="[prefixCls + '-submenu-title']" ref="reference" @click.stop="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>
|
||||||
|
@ -112,7 +112,7 @@
|
||||||
if (this.mode === 'horizontal') return;
|
if (this.mode === 'horizontal') return;
|
||||||
const opened = this.opened;
|
const opened = this.opened;
|
||||||
if (this.accordion) {
|
if (this.accordion) {
|
||||||
this.parent.$children.forEach(item => {
|
this.$parent.$children.forEach(item => {
|
||||||
if (item.$options.name === 'Submenu') item.opened = false;
|
if (item.$options.name === 'Submenu') item.opened = false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 */
|
/* 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, '');
|
||||||
|
|
Loading…
Add table
Reference in a new issue