From cbaf4e236132e86f620f71ea53666a0f74e98006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Mon, 2 Jul 2018 09:55:34 +0800
Subject: [PATCH] update Menu style

---
 examples/routers/menu.vue       | 241 +++++---------------------------
 src/styles/components/menu.less |  20 ++-
 2 files changed, 53 insertions(+), 208 deletions(-)

diff --git a/examples/routers/menu.vue b/examples/routers/menu.vue
index 9f7f225c..1f041501 100644
--- a/examples/routers/menu.vue
+++ b/examples/routers/menu.vue
@@ -1,213 +1,46 @@
 <template>
-    <div>
-        <Menu ref="menu" active-name="1-2" :open-names="openNames" theme="light" accordion @on-open-change="handleOpenChange">
-            <Submenu name="1">
-                <template slot="title">
-                    <Icon type="ios-analytics"></Icon>
-                    Navigation One
-                </template>
-                <MenuGroup title="Item 1">
-                    <MenuItem name="1-1">Option 1</MenuItem>
-                    <MenuItem name="1-2">Option 2</MenuItem>
-                </MenuGroup>
-                <MenuGroup title="Item 2">
-                    <MenuItem name="1-3">Option 3</MenuItem>
-                    <MenuItem name="1-4">Option 4</MenuItem>
-                </MenuGroup>
-            </Submenu>
-            <Submenu name="2">
-                <template slot="title">
-                    <Icon type="ios-filing"></Icon>
-                    Navigation Two
-                </template>
-                <MenuItem name="2-1" to="/button">Option 5</MenuItem>
-                <MenuItem name="2-2" to="//iviewui.com" target="_blank">Option 6</MenuItem>
-                <Submenu name="3">
-                    <template slot="title">Submenu</template>
-                    <MenuItem name="3-1">Option 7</MenuItem>
-                    <MenuItem name="3-2">Option 8</MenuItem>
-                </Submenu>
-                <Submenu name="4">
-                    <template slot="title">Submenu</template>
-                    <MenuItem name="4-1">Option 7</MenuItem>
-                    <MenuItem name="4-2">Option 8</MenuItem>
-                </Submenu>
-            </Submenu>
-            <Submenu name="5">
-                <template slot="title">
-                    <Icon type="ios-gear"></Icon>
-                    Navigation Three
-                </template>
-                <MenuItem name="5-1">Option 9</MenuItem>
-                <MenuItem name="5-2">Option 10</MenuItem>
-                <MenuItem name="5-3">Option 11</MenuItem>
-                <MenuItem name="5-4">Option 12</MenuItem>
-            </Submenu>
-        </Menu>
-        <br/>
-        <Menu ref="menu2" theme="dark" accordion :open-names="openNames2" @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>
+    <Menu active-name="1-2" :open-names="['1']">
+        <Submenu name="1">
+            <template slot="title">
+                <Icon type="ios-analytics"></Icon>
+                Navigation One
             </template>
-        </Menu>
-        <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>
+            <MenuGroup title="Item 1">
+                <MenuItem name="1-1">我是菜单一</MenuItem>
+                <MenuItem name="1-2">我是菜单二</MenuItem>
+            </MenuGroup>
+            <MenuGroup title="Item 2">
+                <MenuItem name="1-3">我是菜单三</MenuItem>
+                <MenuItem name="1-4">我是菜单四</MenuItem>
+            </MenuGroup>
+        </Submenu>
+        <Submenu name="2">
+            <template slot="title">
+                <Icon type="ios-filing"></Icon>
+                Navigation Two
+            </template>
+            <MenuItem name="2-1">我是菜单五</MenuItem>
+            <MenuItem name="2-2">我是菜单六</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>
+                <template slot="title">Submenu</template>
+                <MenuItem name="3-1">我是菜单七</MenuItem>
+                <MenuItem name="3-2">我是菜单八</MenuItem>
             </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>
+        </Submenu>
+        <Submenu name="4">
+            <template slot="title">
+                <Icon type="ios-gear"></Icon>
+                Navigation Three
+            </template>
+            <MenuItem name="4-1">Option 9</MenuItem>
+            <MenuItem name="4-2">Option 10</MenuItem>
+            <MenuItem name="4-3">Option 11</MenuItem>
+            <MenuItem name="4-4">Option 12</MenuItem>
+        </Submenu>
+    </Menu>
 </template>
 <script>
-import custemMenuItem from './custem-menu-item.vue'
     export default {
-        components: {
-            custemMenuItem
-        },
-        data () {
-            return {
-                openNames: ['1'],
-                openNames2: [],
-                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'
-                                            }
-                                        ]
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ],
-                activeName: '1'
-            };
-        },
-        methods: {
-            handleOpenChange (name) {
-                console.log(name)
-            },
-            setOpenNames () {
-                this.openNames = ['2', '3'];
-                this.openNames2 = ['222', '222-222', '222-222-222', '222-222-222-111']
-                this.$nextTick(() => {
-                    this.$refs.menu.updateOpened();
-                    this.$refs.menu2.updateOpened();
-                })
-            },
-            addNewItem () {
-                this.menuList[1].children[1].children.push({
-                    name: '222-222-333',
-                    children: [
-                        {
-                            name: '222-222-333-111'
-                        }
-                    ]
-                })
-            },
-            changeActive () {
-                this.activeName = String(Number(this.activeName) + 1)
-            },
-            hc (data) {
-                console.log(data);
-            }
-        }
+
     }
 </script>
diff --git a/src/styles/components/menu.less b/src/styles/components/menu.less
index 402eff35..224dc22d 100644
--- a/src/styles/components/menu.less
+++ b/src/styles/components/menu.less
@@ -154,7 +154,8 @@
         transition: all @transition-time @ease-in-out;
 
         &:hover{
-            background: @background-color-select-hover;
+            //background: @background-color-select-hover;
+            color: @primary-color;
         }
     }
 
@@ -193,11 +194,22 @@
     }
 
     &-light&-vertical &-item{
-        border-right: 2px solid transparent;
+        //border-right: 2px solid transparent;
         &-active:not(.@{menu-prefix-cls}-submenu){
             color: @primary-color;
-            border-right: 2px solid @primary-color;
+            background: ~`colorPalette("@{primary-color}", 1)`;
+            //border-right: 2px solid @primary-color;
             z-index: 2;
+            &:after{
+                content: '';
+                display: block;
+                width: 2px;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                right: 0;
+                background: @primary-color;
+            }
         }
     }
 
@@ -214,7 +226,7 @@
         }
         &-active:not(.@{menu-prefix-cls}-submenu){
             color: @primary-color;
-            border-right: 2px solid @primary-color;
+            //border-right: 2px solid @primary-color;
         }
     }
     &-dark&-vertical &-submenu &-item{