Merge pull request #2822 from lison16/menu

make menu support more than 2 levels

examples/routers/menu.vue

@@ -1,32 +1,67 @@
 <template>
     <div>
-        <Menu mode="horizontal" :theme="theme1" active-name="1">
+        <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
             </Menu-item>
             <Menu-item name="2">
                 <Icon type="ios-people"></Icon>
-                用户管理
+                一级2
             </Menu-item>
             <Submenu name="3">
                 <template slot="title">
-                    <Icon type="stats-bars"></Icon>
+                    <Icon type="ios-people"></Icon>
-                    统计分析
+                    一级3
                 </template>
-                <Menu-group title="使用">
+                <Menu-item name="3-1">二级1</Menu-item>
-                    <Menu-item name="3-1">新增和启动</Menu-item>
+                <Menu-item name="3-2">二级2</Menu-item>
-                    <Menu-item name="3-2">活跃分析</Menu-item>
+                <Submenu name="3-3">
-                    <Menu-item name="3-3">时段分析</Menu-item>
+                    <template slot="title">
-                </Menu-group>
+                        <Icon type="stats-bars"></Icon>
-                <Menu-group title="留存">
+                        二级3
-                    <Menu-item name="3-4">用户留存</Menu-item>
+                    </template>
-                    <Menu-item name="3-5">流失用户</Menu-item>
+                    <Menu-item name="3-3-1">三级1</Menu-item>
-                </Menu-group>
+                    <Menu-item name="3-3-2">三级2</Menu-item>
+                    <Submenu name="3-3-3">
+                        <template slot="title">
+                            <Icon type="stats-bars"></Icon>
+                            三级3
+                        </template>
+                        <Menu-item name="3-3-3-1">四级1</Menu-item>
+                        <Menu-item name="3-3-3-2">四级2</Menu-item>
+                        <MenuGroup title="Menu-Group">
+                            <MenuItem name="3-3-3-3-1">
+                                <Icon type="document-text"></Icon>
+                                Group-item1
+                            </MenuItem>
+                            <MenuItem name="3-3-3-3-2">
+                                <Icon type="chatbubbles"></Icon>
+                                Group-item2
+                            </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">
                 <Icon type="settings"></Icon>
-                综合设置
+                一级4
             </Menu-item>
         </Menu>
         <br>
@@ -43,9 +78,20 @@
     export default {
         data () {
             return {
-                theme1: 'light',
+                theme1: 'dark',
-                value4: ''
+                value4: '',
-            }
+                openArr: ['3', '3-3', '3-3-3']
+            };
+        },
+        methods: {
+            handleSelect (name) {
+                // console.log(name);
+                return name;
+            },
+            handleOpen (openArr) {
+                // console.log(openArr);
+                return openArr;
             }
         }
+    };
 </script>

src/components/menu/menu-group.vue

@@ -1,10 +1,11 @@
 <template>
     <li :class="[prefixCls + '-item-group']">
-        <div :class="[prefixCls + '-item-group-title']">{{ title }}</div>
+        <div :class="[prefixCls + '-item-group-title']" :style="groupStyle">{{ title }}</div>
         <ul><slot></slot></ul>
     </li>
 </template>
 <script>
+    import { findComponentUpward, findComponentsUpward } from '../../utils/assist';
     const prefixCls = 'ivu-menu';
 
     export default {
@@ -19,6 +20,19 @@
             return {
                 prefixCls: prefixCls
             };
+        },
+        computed: {
+            parentSubmenuNum () {
+                return findComponentsUpward(this, 'Submenu').length;
+            },
+            hasParentSubmenu () {
+                return findComponentUpward(this, 'Submenu');
+            },
+            groupStyle () {
+                return this.hasParentSubmenu ? {
+                    paddingLeft: 43 + (this.parentSubmenuNum - 1) * 28 + 'px'
+                } : {};
+            }
         }
     };
 </script>

src/components/menu/menu-item.vue

@@ -1,13 +1,15 @@
 <template>
-    <li :class="classes" @click.stop="handleClick"><slot></slot></li>
+    <li :class="classes" @click.stop="handleClick" :style="itemStyle"><slot></slot></li>
 </template>
 <script>
     import Emitter from '../../mixins/emitter';
+    import { findComponentUpward } from '../../utils/assist';
     const prefixCls = 'ivu-menu';
+    import mixin from './mixin';
 
     export default {
         name: 'MenuItem',
-        mixins: [ Emitter ],
+        mixins: [ Emitter, mixin ],
         props: {
             name: {
                 type: [String, Number],
@@ -33,18 +35,18 @@
                         [`${prefixCls}-item-disabled`]: this.disabled
                     }
                 ];
+            },
+            itemStyle () {
+                return this.hasParentSubmenu ? {
+                    paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
+                } : {};
             }
         },
         methods: {
             handleClick () {
                 if (this.disabled) return;
 
-                let parent = this.$parent;
+                let parent = findComponentUpward(this, 'Submenu');
-                let name = parent.$options.name;
-                while (parent && (!name || name !== 'Submenu')) {
-                    parent = parent.$parent;
-                    if (parent) name = parent.$options.name;
-                }
 
                 if (parent) {
                     this.dispatch('Submenu', 'on-menu-item-select', this.name);
@@ -57,7 +59,7 @@
             this.$on('on-update-active-name', (name) => {
                 if (this.name === name) {
                     this.active = true;
-                    this.dispatch('Submenu', 'on-update-active-name', true);
+                    this.dispatch('Submenu', 'on-update-active-name', name);
                 } else {
                     this.active = false;
                 }

src/components/menu/menu.vue

@@ -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);
                     }
                 }

src/components/menu/mixin.js

@@ -0,0 +1,11 @@
+import { findComponentUpward, findComponentsUpward } from '../../utils/assist';
+export default {
+    computed: {
+        hasParentSubmenu () {
+            return findComponentUpward(this, 'Submenu');
+        },
+        parentSubmenuNum () {
+            return findComponentsUpward(this, 'Submenu').length;
+        }
+    }
+};

src/components/menu/submenu.vue

@@ -1,6 +1,6 @@
 <template>
     <li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
-        <div :class="[prefixCls + '-submenu-title']" ref="reference" @click="handleClick">
+        <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>
@@ -21,14 +21,15 @@
     import Drop from '../select/dropdown.vue';
     import Icon from '../icon/icon.vue';
     import CollapseTransition from '../base/collapse-transition';
-    import { getStyle, findComponentUpward } from '../../utils/assist';
+    import { getStyle, findComponentUpward, findComponentsDownward } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
+    import mixin from './mixin';
 
     const prefixCls = 'ivu-menu';
 
     export default {
         name: 'Submenu',
-        mixins: [ Emitter ],
+        mixins: [ Emitter, mixin ],
         components: { Icon, Drop, CollapseTransition },
         props: {
             name: {
@@ -54,9 +55,11 @@
                 return [
                     `${prefixCls}-submenu`,
                     {
-                        [`${prefixCls}-item-active`]: this.active,
+                        [`${prefixCls}-item-active`]: this.active && !this.hasParentSubmenu,
                         [`${prefixCls}-opened`]: this.opened,
-                        [`${prefixCls}-submenu-disabled`]: this.disabled
+                        [`${prefixCls}-submenu-disabled`]: this.disabled,
+                        [`${prefixCls}-submenu-has-parent-submenu`]: this.hasParentSubmenu,
+                        [`${prefixCls}-child-item-active`]: this.active
                     }
                 ];
             },
@@ -71,6 +74,11 @@
 
                 if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
                 return style;
+            },
+            titleStyle () {
+                return this.hasParentSubmenu ? {
+                    paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
+                } : {};
             }
         },
         methods: {
@@ -99,7 +107,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;
                     });
                 }
@@ -131,6 +139,10 @@
                 return true;
             });
             this.$on('on-update-active-name', (status) => {
+                if (findComponentUpward(this, 'Submenu')) this.dispatch('Submenu', 'on-update-active-name', status);
+                if (findComponentsDownward(this, 'Submenu')) findComponentsDownward(this, 'Submenu').forEach(item => {
+                    item.active = false;
+                });
                 this.active = status;
             });
         }

src/styles/components/menu.less

@@ -160,13 +160,18 @@
     &-submenu-title-icon {
         transition: transform @transition-time @ease-in-out;
     }
-    &-opened &-submenu-title-icon{
+    &-opened > * > &-submenu-title-icon{
         transform: rotate(180deg);
     }
 
-    &-vertical &-submenu &-item{
+    &-vertical &-submenu{
+        &-nested{
+            padding-left: 20px;
+        }
+        .@{menu-prefix-cls}-item{
             padding-left: 43px;
         }
+    } 
     &-vertical &-item-group{
         &-title{
             height: 48px;
@@ -217,7 +222,10 @@
             background: @primary-color !important;
         }
     }
-    &-dark&-vertical &-item-active &-submenu-title{
+    // &-dark&-vertical &-item-active &-submenu-title{
+    //     color: #fff;
+    // }
+    &-dark&-vertical &-child-item-active > &-submenu-title{
         color: #fff;
     }
 
@@ -226,6 +234,12 @@
         .@{menu-prefix-cls}-submenu-title{
             background: @menu-dark-title;
         }
+
+        .@{menu-prefix-cls}-submenu-has-parent-submenu{
+            .@{menu-prefix-cls}-submenu-title{
+                background: transparent;
+            }
+        }
     }
 }
 .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);

src/utils/assist.js

@@ -217,6 +217,27 @@ export function findComponentsDownward (context, componentName) {
     }, []);
 }
 
+// Find components upward
+export function findComponentsUpward (context, componentName) {
+    let parents = [];
+    if (context.$parent) {
+        if (context.$parent.$options.name === componentName) parents.push(context.$parent);
+        return parents.concat(findComponentsUpward(context.$parent, componentName));
+    } else {
+        return [];
+    }
+}
+
+// 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, '');