make menu support more than 2 levels

zhigang.li
1 parent 3537176f
Showing 7 changed files with 117 additions and 48 deletions Show diff stats
examples/routers/menu.vue
src/components/cascader/cascader.vue
src/components/menu/menu-item.vue
src/components/menu/submenu.vue
src/locale/lang/hi-IN.js
src/styles/components/menu.less
src/utils/assist.js
 <template>
     <div>
-        <Menu mode="horizontal" :theme="theme1" active-name="1">
+        <Menu :theme="theme1" active-name="1" @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">新增和启动</Menu-item>
-                    <Menu-item name="3-2">活跃分析</Menu-item>
-                    <Menu-item name="3-3">时段分析</Menu-item>
-                </Menu-group>
-                <Menu-group title="留存">
-                    <Menu-item name="3-4">用户留存</Menu-item>
-                    <Menu-item name="3-5">流失用户</Menu-item>
-                </Menu-group>
+                <Menu-item name="3-1">二级1</Menu-item>
+                <Menu-item name="3-2">二级2</Menu-item>
+                <Submenu name="3-3">
+                    <template slot="title">
+                        <Icon type="stats-bars"></Icon>
+                        二级3
+                    </template>
+                    <Menu-item name="3-3-1">三级1</Menu-item>
+                    <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>
+                    </Submenu>
+                </Submenu>
             </Submenu>
             <Menu-item name="4">
                 <Icon type="settings"></Icon>
-                综合设置
+                一级4
             </Menu-item>
         </Menu>
         <br>
@@ -43,9 +52,20 @@
     export default {
         data () {
             return {
-                theme1: 'light',
-                value4: ''
+                theme1: 'dark',
+                value4: '',
+                openArr: ['3', '3-3', '3-3-3']
+            };
+        },
+        methods: {
+            handleSelect (name) {
+                // console.log(name);
+                return name;
+            },
+            handleOpen (openArr) {
+                // console.log(openArr);
+                return openArr;
             }
         }
-    }
+    };
 </script>
@@ -220,7 +220,7 @@
                 }
                 getSelections(this.data);
                 selections = selections.filter(item => {
-                    return item.label ? item.label.indexOf(this.query) > -1 : false
+                    return item.label ? item.label.indexOf(this.query) > -1 : false;
                 }).map(item => {
                     item.display = item.display.replace(new RegExp(this.query, 'g'), `<span>${this.query}</span>`);
                     return item;
 <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, findComponentsUpward } from '../../utils/assist';
     const prefixCls = 'ivu-menu';
     export default {
@@ -33,18 +34,24 @@
                         [`${prefixCls}-item-disabled`]: this.disabled
                     }
                 ];
+            },
+            parentSubmenuNum () {
+                return findComponentsUpward(this, 'Submenu').length;
+            },
+            itemStyle () {
+                return this.hasParentSubmenu ? {
+                    paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
+                } : {};
+            },
+            hasParentSubmenu () {
+                return findComponentUpward(this, 'Submenu');
             }
         },
         methods: {
             handleClick () {
                 if (this.disabled) return;
-                let parent = this.$parent;
-                let name = parent.$options.name;
-                while (parent && (!name || name !== 'Submenu')) {
-                    parent = parent.$parent;
-                    if (parent) name = parent.$options.name;
-                }
+                let parent = findComponentUpward(this, 'Submenu');
                 if (parent) {
                     this.dispatch('Submenu', 'on-menu-item-select', this.name);
@@ -57,7 +64,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;
                 }
 <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="handleClick" :style="titleStyle">
             <slot name="title"></slot>
             <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
         </div>
@@ -21,7 +21,7 @@
     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, findComponentsUpward, findComponentsDownward } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
     const prefixCls = 'ivu-menu';
@@ -54,9 +54,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 +73,17 @@
                 if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
                 return style;
+            },
+            hasParentSubmenu () {
+                return findComponentUpward(this, 'Submenu');
+            },
+            parentSubmenuNum () {
+                return findComponentsUpward(this, 'Submenu').length;
+            },
+            titleStyle () {
+                return this.hasParentSubmenu ? {
+                    paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
+                } : {};
             }
         },
         methods: {
@@ -131,6 +144,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;
             });
         }
@@ -48,18 +48,18 @@ const lang = {
                 sat: 'शनिवार'
             },
             months: {
-            m1: 'जनवरी',
-            m2: 'फरवरी',
-            m3: 'मार्च',
-            m4: 'अप्रैल',
-            m5: 'मई',
-            m6: 'जून',
-            m7: 'जुलाई',
-            m8: 'अगस्त',
-            m9: 'सितंबर',
-            m10: 'अक्टूबर',
-            m11: 'नवंबर',
-            m12: 'दिसंबर'
+                m1: 'जनवरी',
+                m2: 'फरवरी',
+                m3: 'मार्च',
+                m4: 'अप्रैल',
+                m5: 'मई',
+                m6: 'जून',
+                m7: 'जुलाई',
+                m8: 'अगस्त',
+                m9: 'सितंबर',
+                m10: 'अक्टूबर',
+                m11: 'नवंबर',
+                m12: 'दिसंबर'
             }
         },
         transfer: {
@@ -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{
-        padding-left: 43px;
-    }
+    &-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);
@@ -217,6 +217,17 @@ 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 [];
+    }
+}
+
 /* istanbul ignore next */
 const trim = function(string) {
     return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');