Add logical treatment to 'accordion'

zhigang.li
1 parent 3e3fba0e
Showing 4 changed files with 38 additions and 5 deletions Show diff stats
examples/routers/menu.vue
src/components/menu/menu.vue
src/components/menu/submenu.vue
src/utils/assist.js
 <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">
@@ -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);
                     }
                 }
 <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;
                     });
                 }
@@ -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, '');