change the way to handle submenu collapse when accordion is true

zhigang.li
1 parent b924d14d
Showing 7 changed files with 147 additions and 12 deletions Show diff stats
examples/routers/menu-item.vue
examples/routers/menu.vue
package-lock.json
package.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 './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
     },
@@ -19,7 +19,7 @@
     "src"
   ],
   "scripts": {
-    "dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8081 --config build/webpack.dev.config.js",
+    "dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 1234 --config build/webpack.dev.config.js",
     "dev:s": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8081 --host 0.0.0.0 --config build/webpack.dev.config.js",
     "dist:style": "gulp --gulpfile build/build-style.js",
     "dist:dev": "webpack --config build/webpack.dist.dev.config.js",
@@ -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,9 @@ 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 => {
+        return item._uid === context._uid;
+    });
     if (exceptMe) res.splice(index, 1);
     return res;
 }
@@ -322,3 +324,15 @@ export function setMatchMedia () {
         window.matchMedia = window.matchMedia || matchMediaPolyfill;
     }
 }
+
+export function getCommonString (arr1, arr2) {
+    const len1 = arr1.length;
+    const len2 = arr2.length;
+    let i = -1;
+    const len = Math.min(len1, len2);
+    let res = [];
+    while (++i < len) {
+        if (arr1.indexOf(arr2[i]) >= 0) res.push(arr2[i]);
+    }
+    return res;
+}