From e549c92b1dc3bc63cb3ca45be1ae278ebf80a8b4 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Wed, 30 May 2018 18:40:43 +0800
Subject: [PATCH] fixed https://github.com/iview/iview/issues/3733

---
 examples/routers/menu.vue    | 56 ++++++++++++++++++++++++++++++++++--
 src/components/menu/menu.vue | 32 +++++++++++++++------
 2 files changed, 77 insertions(+), 11 deletions(-)

diff --git a/examples/routers/menu.vue b/examples/routers/menu.vue
index 70ad13dd..686c7d92 100644
--- a/examples/routers/menu.vue
+++ b/examples/routers/menu.vue
@@ -50,8 +50,53 @@
                 <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> -->
+        <Button @click="changeActive">修改激活项</Button>
+        <Button @click="setOpenNames">修改展开数组</Button>
+        <Menu mode="horizontal" theme="light" :active-name="activeName" @on-open-change="hc">
+            <MenuItem name="1">
+                <Icon type="ios-paper"></Icon>
+                内容管理
+            </MenuItem>
+            <MenuItem name="2">
+                <Icon type="ios-people"></Icon>
+                用户管理
+            </MenuItem>
+            <Submenu name="3">
+                <template slot="title">
+                    <Icon type="stats-bars"></Icon>
+                    统计分析
+                </template>
+                <MenuGroup title="使用">
+                    <MenuItem name="3-1">新增和启动</MenuItem>
+                    <MenuItem name="3-2">活跃分析</MenuItem>
+                    <MenuItem name="3-3">时段分析</MenuItem>
+                </MenuGroup>
+                <MenuGroup title="留存">
+                    <MenuItem name="3-4">用户留存</MenuItem>
+                    <MenuItem name="3-5">流失用户</MenuItem>
+                </MenuGroup>
+            </Submenu>
+            <Submenu name="4">
+                <template slot="title">
+                    <Icon type="stats-bars"></Icon>
+                    统计分析2
+                </template>
+                <MenuGroup title="使用2">
+                    <MenuItem name="4-1">新增和启动2</MenuItem>
+                    <MenuItem name="4-2">活跃分析2</MenuItem>
+                    <MenuItem name="4-3">时段分析2</MenuItem>
+                </MenuGroup>
+                <MenuGroup title="留存2">
+                    <MenuItem name="4-4">用户留存2</MenuItem>
+                    <MenuItem name="4-5">流失用户2</MenuItem>
+                </MenuGroup>
+            </Submenu>
+            <MenuItem name="5">
+                <Icon type="settings"></Icon>
+                综合设置
+            </MenuItem>
+        </Menu>
     </div>
 </template>
 <script>
@@ -129,7 +174,8 @@ import custemMenuItem from './custem-menu-item.vue'
                             }
                         ]
                     }
-                ]
+                ],
+                activeName: '1'
             };
         },
         methods: {
@@ -151,6 +197,12 @@ import custemMenuItem from './custem-menu-item.vue'
                         }
                     ]
                 })
+            },
+            changeActive () {
+                this.activeName = String(Number(this.activeName) + 1)
+            },
+            hc (data) {
+                console.log(data);
             }
         }
     }
diff --git a/src/components/menu/menu.vue b/src/components/menu/menu.vue
index 44eae0eb..89b287df 100644
--- a/src/components/menu/menu.vue
+++ b/src/components/menu/menu.vue
@@ -80,23 +80,37 @@
                 let names = [...this.openedNames];
                 const index = names.indexOf(name);
                 if (index >= 0) {
-                    names.splice(index, 1);
+                    let currentSubmenu = null;
+                    findComponentsDownward(this, 'Submenu').forEach(item => {
+                        if (item.name === name) {
+                            currentSubmenu = item;
+                            item.opened = false;
+                        }
+                    });
+                    findComponentsDownward(currentSubmenu, 'Submenu').forEach(item => {
+                        item.opened = false;
+                    });
                 } else {
-                    if (this.accordion) {
+                    if (this.mode === 'horizontal' && this.accordion) {
                         let currentSubmenu = null;
-                        names = [];
                         findComponentsDownward(this, 'Submenu').forEach(item => {
-                            if (item.name === name) currentSubmenu = item;
+                            if (item.name === name) {
+                                currentSubmenu = item;
+                                item.opened = true;
+                            }
                         });
                         findComponentsUpward(currentSubmenu, 'Submenu').forEach(item => {
-                            names.push(item.name);
+                            item.opened = true;
+                        });
+                    } else {
+                        findComponentsDownward(this, 'Submenu').forEach(item => {
+                            if (item.name === name) item.opened = true;
                         });
                     }
-                    names.push(name);
                 }
-                this.openedNames = names;
-                this.updateOpened();
-                this.$emit('on-open-change', this.openedNames);
+                let openedNames = findComponentsDownward(this, 'Submenu').filter(item => item.opened).map(item => item.name);
+                this.openedNames = [...openedNames];
+                this.$emit('on-open-change', openedNames);
             },
             updateOpened () {
                 const items = findComponentsDownward(this, 'Submenu');