other / mew-iview

Commit a163daa07a51b694db6fe52bc9f5e3c50b8f866f

Authored by zhigang.li
1 parent 3e3fba0e

Add logical treatment to 'accordion'

Showing 4 changed files with 38 additions and 5 deletions   Show diff stats
Inline Side-by-side
examples/routers/menu.vue
  Show/Hide comments   View file @a163daa
1 1 <template>
2 2 <div>
3   - <Menu :theme="theme1" active-name="1" @on-select="handleSelect" @on-open-change="handleOpen" :open-names="openArr">
  3 + <Menu :theme="theme1" active-name="1" accordion @on-select="handleSelect" @on-open-change="handleOpen" :open-names="openArr">
4 4 <Menu-item name="1">
5 5 <Icon type="ios-paper"></Icon>
6 6 一级1
... ... @@ -41,6 +41,22 @@
41 41 </MenuItem>
42 42 </MenuGroup>
43 43 </Submenu>
  44 + <Submenu name="3-3-4">
  45 + <template slot="title">
  46 + <Icon type="stats-bars"></Icon>
  47 + 三级4
  48 + </template>
  49 + <Menu-item name="3-3-4-1">四级1</Menu-item>
  50 + <Menu-item name="3-3-4-2">四级2</Menu-item>
  51 + </Submenu>
  52 + </Submenu>
  53 + <Submenu name="3-4">
  54 + <template slot="title">
  55 + <Icon type="stats-bars"></Icon>
  56 + 二级4
  57 + </template>
  58 + <Menu-item name="3-4-1">三级1</Menu-item>
  59 + <Menu-item name="3-4-2">三级2</Menu-item>
44 60 </Submenu>
45 61 </Submenu>
46 62 <Menu-item name="4">
... ...
src/components/menu/menu.vue
  Show/Hide comments   View file @a163daa
... ... @@ -2,7 +2,7 @@
2 2 <ul :class="classes" :style="styles"><slot></slot></ul>
3 3 </template>
4 4 <script>
5   - import { oneOf, findComponentsDownward } from '../../utils/assist';
  5 + import { oneOf, findComponentsDownward, findBrothersComponents } from '../../utils/assist';
6 6 import Emitter from '../../mixins/emitter';
7 7  
8 8 const prefixCls = 'ivu-menu';
... ... @@ -82,7 +82,14 @@
82 82 } else {
83 83 this.openNames.push(name);
84 84 if (this.accordion) {
85   - this.openNames.splice(0, this.openNames.length);
  85 + let currentSubmenu = {};
  86 + findComponentsDownward(this, 'Submenu').forEach(item => {
  87 + if (item.name === name) currentSubmenu = item;
  88 + });
  89 + findBrothersComponents(currentSubmenu, 'Submenu').forEach(item => {
  90 + let index = this.openNames.indexOf(item.name);
  91 + this.openNames.splice(index, index >= 0 ? 1 : 0);
  92 + });
86 93 this.openNames.push(name);
87 94 }
88 95 }
... ...
src/components/menu/submenu.vue
  Show/Hide comments   View file @a163daa
1 1 <template>
2 2 <li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
3   - <div :class="[prefixCls + '-submenu-title']" ref="reference" @click="handleClick" :style="titleStyle">
  3 + <div :class="[prefixCls + '-submenu-title']" ref="reference" @click.stop="handleClick" :style="titleStyle">
4 4 <slot name="title"></slot>
5 5 <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
6 6 </div>
... ... @@ -112,7 +112,7 @@
112 112 if (this.mode === 'horizontal') return;
113 113 const opened = this.opened;
114 114 if (this.accordion) {
115   - this.parent.$children.forEach(item => {
  115 + this.$parent.$children.forEach(item => {
116 116 if (item.$options.name === 'Submenu') item.opened = false;
117 117 });
118 118 }
... ...
src/utils/assist.js
  Show/Hide comments   View file @a163daa
... ... @@ -228,6 +228,16 @@ export function findComponentsUpward (context, componentName) {
228 228 }
229 229 }
230 230  
  231 +// Find brothers components
  232 +export function findBrothersComponents (context, componentName) {
  233 + let res = context.$parent.$children.filter(item => {
  234 + return item.$options.name === componentName;
  235 + });
  236 + let index = res.indexOf(context);
  237 + res.splice(index, 1);
  238 + return res;
  239 +}
  240 +
231 241 /* istanbul ignore next */
232 242 const trim = function(string) {
233 243 return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
... ...