Merge pull request #3617 from lison16/menu-accordion

change the way to handle submenu collapse when accordion is true

Merge pull request #3617 from lison16/menu-accordion
change the way to handle submenu collapse when accordion is true
Aresn · GitHub
2 parents b924d14d 4c682092
Showing 6 changed files with 132 additions and 11 deletions Show diff stats
examples/routers/custem-menu-item.vue
examples/routers/menu.vue
package-lock.json
src/components/menu/menu.vue
src/components/menu/mixin.js
src/utils/assist.js
+<template>
+  <Submenu :name="`${parentName}`">
+    <template slot="title">
+      <span>{{ parentItem.name }}</span>
+    </template>
+    <template v-for="item in children">
+      <custem-menu-item v-if="item.children && item.children.length !== 0" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item>
+      <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
+    </template>
+  </Submenu>
+</template>
+<script>
+export default {
+  name: 'custemMenuItem',
+  props: {
+    parentItem: {
+      type: Object,
+      default: () => {}
+    },
+    theme: String,
+    iconSize: Number
+  },
+  computed: {
+    parentName () {
+      return this.parentItem.name
+    },
+    children () {
+      return this.parentItem.children
+    }
+  }
+}
+</script>
@@ -44,14 +44,92 @@
                 <MenuItem name="5-4">Option 12</MenuItem>
             </Submenu>
         </Menu>
+        <!-- <Menu theme="dark" accordion @on-open-change="handleOpenChange">
+            <template v-for="item in menuList">
+                <custem-menu-item v-if="item.children" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item>
+                <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
+            </template>
+        </Menu>
         <Button @click="setOpenNames">修改展开数组</Button>
+        <Button @click="addNewItem">添加菜单项</Button> -->
     </div>
 </template>
 <script>
+import custemMenuItem from './custem-menu-item.vue'
     export default {
+        components: {
+            custemMenuItem
+        },
         data () {
             return {
-                openNames: ['1']
+                openNames: ['1'],
+                menuList: [
+                    {
+                        name: '111',
+                        children: [
+                            {
+                                name: '111-111'
+                            },
+                            {
+                                name: '111-222'
+                            }
+                        ]
+                    },
+                    {
+                        name: '222',
+                        children: [
+                            {
+                                name: '222-111'
+                            },
+                            {
+                                name: '222-222',
+                                children: [
+                                    {
+                                        name: '222-222-111'
+                                    },
+                                    {
+                                        name: '222-222-222',
+                                        children: [
+                                            {
+                                                name: '222-222-222-111'
+                                            },
+                                            {
+                                                name: '222-222-222-222'
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                name: '222-333',
+                                children: [
+                                    {
+                                        name: '222-333-111',
+                                        children: [
+                                            {
+                                                name: '222-333-111-111'
+                                            },
+                                            {
+                                                name: '222-333-111-222'
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        name: '222-333-222',
+                                        children: [
+                                            {
+                                                name: '222-333-222-111'
+                                            },
+                                            {
+                                                name: '222-333-222-222'
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
             };
         },
         methods: {
@@ -63,6 +141,16 @@
                 this.$nextTick(() => {
                     this.$refs.menu.updateOpened();
                 })
+            },
+            addNewItem () {
+                this.menuList[1].children[1].children.push({
+                    name: '222-222-333',
+                    children: [
+                        {
+                            name: '222-222-333-111'
+                        }
+                    ]
+                })
             }
         }
     }
 {
   "name": "iview",
-  "version": "2.13.1",
+  "version": "2.14.0-rc.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@sinonjs/formatio": {
       "version": "2.0.0",
-      "resolved": "http://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
       "integrity": "sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==",
       "dev": true,
       "requires": {
@@ -2315,7 +2315,7 @@
     },
     "compression": {
       "version": "1.7.2",
-      "resolved": "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
       "integrity": "sha1-qv+81qr4VLROuygDU9WtFlH1mmk=",
       "dev": true,
       "requires": {
@@ -9278,7 +9278,7 @@
     },
     "onetime": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
       "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
       "dev": true
     },
@@ -2,7 +2,7 @@
     <ul :class="classes" :style="styles"><slot></slot></ul>
 </template>
 <script>
-    import { oneOf, findComponentsDownward, findBrothersComponents } from '../../utils/assist';
+    import { oneOf, findComponentsDownward, findComponentsUpward } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
  
     const prefixCls = 'ivu-menu';
@@ -84,17 +84,18 @@
                 } else {
                     if (this.accordion) {
                         let currentSubmenu = null;
+                        names = [];
                         findComponentsDownward(this, 'Submenu').forEach(item => {
                             if (item.name === name) currentSubmenu = item;
                         });
-                        findBrothersComponents(currentSubmenu, 'Submenu').forEach(item => {
-                            let i = names.indexOf(item.name);
-                            if (i >= 0) names.splice(i, 1);
+                        findComponentsUpward(currentSubmenu, 'Submenu').forEach(item => {
+                            names.push(item.name);
                         });
                     }
                     names.push(name);
                 }
                 this.openedNames = names;
+                this.updateOpened();
                 this.$emit('on-open-change', this.openedNames);
             },
             updateOpened () {
@@ -16,4 +16,4 @@ export default {
             return this.menu.mode;
         }
     }
-};
 \ No newline at end of file
+};
@@ -234,7 +234,7 @@ export function findBrothersComponents (context, componentName, exceptMe = true)
     let res = context.$parent.$children.filter(item => {
         return item.$options.name === componentName;
     });
-    let index = res.indexOf(context);
+    let index = res.findIndex(item => item._uid === context._uid);
     if (exceptMe) res.splice(index, 1);
     return res;
 }