other / mew-iview

Commit b4c37946978f5b7d37147c22ac355485b75d7100

Authored by Aresn
Committed by GitHub
2 parents 23646cc5 0b9c3d37

Merge pull request #2822 from lison16/menu 

make menu support more than 2 levels
Showing 8 changed files with 168 additions and 41 deletions   Show diff stats
Inline Side-by-side
examples/routers/menu.vue
  Show/Hide comments   View file @b4c3794
1 <template> 1 <template>
2 <div> 2 <div>
3 - <Menu mode="horizontal" :theme="theme1" active-name="1"> 3 + <Menu :theme="theme1" active-name="1" accordion @on-select="handleSelect" @on-open-change="handleOpen" :open-names="openArr">
4 <Menu-item name="1"> 4 <Menu-item name="1">
5 <Icon type="ios-paper"></Icon> 5 <Icon type="ios-paper"></Icon>
6 - 内容管理 6 + 一级1
7 </Menu-item> 7 </Menu-item>
8 <Menu-item name="2"> 8 <Menu-item name="2">
9 <Icon type="ios-people"></Icon> 9 <Icon type="ios-people"></Icon>
10 - 用户管理 10 + 一级2
11 </Menu-item> 11 </Menu-item>
12 <Submenu name="3"> 12 <Submenu name="3">
13 <template slot="title"> 13 <template slot="title">
14 - <Icon type="stats-bars"></Icon>  
15 - 统计分析 14 + <Icon type="ios-people"></Icon>
  15 + 一级3
16 </template> 16 </template>
17 - <Menu-group title="使用">  
18 - <Menu-item name="3-1">新增和启动</Menu-item>  
19 - <Menu-item name="3-2">活跃分析</Menu-item>  
20 - <Menu-item name="3-3">时段分析</Menu-item>  
21 - </Menu-group>  
22 - <Menu-group title="留存">  
23 - <Menu-item name="3-4">用户留存</Menu-item>  
24 - <Menu-item name="3-5">流失用户</Menu-item>  
25 - </Menu-group> 17 + <Menu-item name="3-1">二级1</Menu-item>
  18 + <Menu-item name="3-2">二级2</Menu-item>
  19 + <Submenu name="3-3">
  20 + <template slot="title">
  21 + <Icon type="stats-bars"></Icon>
  22 + 二级3
  23 + </template>
  24 + <Menu-item name="3-3-1">三级1</Menu-item>
  25 + <Menu-item name="3-3-2">三级2</Menu-item>
  26 + <Submenu name="3-3-3">
  27 + <template slot="title">
  28 + <Icon type="stats-bars"></Icon>
  29 + 三级3
  30 + </template>
  31 + <Menu-item name="3-3-3-1">四级1</Menu-item>
  32 + <Menu-item name="3-3-3-2">四级2</Menu-item>
  33 + <MenuGroup title="Menu-Group">
  34 + <MenuItem name="3-3-3-3-1">
  35 + <Icon type="document-text"></Icon>
  36 + Group-item1
  37 + </MenuItem>
  38 + <MenuItem name="3-3-3-3-2">
  39 + <Icon type="chatbubbles"></Icon>
  40 + Group-item2
  41 + </MenuItem>
  42 + </MenuGroup>
  43 + </Submenu>
  44 + <Submenu name="3-3-4">
  45 + <template slot="title">
  46 + <Icon type="stats-bars"></Icon>
  47 + 三级4
  48 + </template>
  49 + <Menu-item name="3-3-4-1">四级1</Menu-item>
  50 + <Menu-item name="3-3-4-2">四级2</Menu-item>
  51 + </Submenu>
  52 + </Submenu>
  53 + <Submenu name="3-4">
  54 + <template slot="title">
  55 + <Icon type="stats-bars"></Icon>
  56 + 二级4
  57 + </template>
  58 + <Menu-item name="3-4-1">三级1</Menu-item>
  59 + <Menu-item name="3-4-2">三级2</Menu-item>
  60 + </Submenu>
26 </Submenu> 61 </Submenu>
27 <Menu-item name="4"> 62 <Menu-item name="4">
28 <Icon type="settings"></Icon> 63 <Icon type="settings"></Icon>
29 - 综合设置 64 + 一级4
30 </Menu-item> 65 </Menu-item>
31 </Menu> 66 </Menu>
32 <br> 67 <br>
@@ -43,9 +78,20 @@ @@ -43,9 +78,20 @@
43 export default { 78 export default {
44 data () { 79 data () {
45 return { 80 return {
46 - theme1: 'light',  
47 - value4: '' 81 + theme1: 'dark',
  82 + value4: '',
  83 + openArr: ['3', '3-3', '3-3-3']
  84 + };
  85 + },
  86 + methods: {
  87 + handleSelect (name) {
  88 + // console.log(name);
  89 + return name;
  90 + },
  91 + handleOpen (openArr) {
  92 + // console.log(openArr);
  93 + return openArr;
48 } 94 }
49 } 95 }
50 - } 96 + };
51 </script> 97 </script>
src/components/menu/menu-group.vue
  Show/Hide comments   View file @b4c3794
1 <template> 1 <template>
2 <li :class="[prefixCls + '-item-group']"> 2 <li :class="[prefixCls + '-item-group']">
3 - <div :class="[prefixCls + '-item-group-title']">{{ title }}</div> 3 + <div :class="[prefixCls + '-item-group-title']" :style="groupStyle">{{ title }}</div>
4 <ul><slot></slot></ul> 4 <ul><slot></slot></ul>
5 </li> 5 </li>
6 </template> 6 </template>
7 <script> 7 <script>
  8 + import { findComponentUpward, findComponentsUpward } from '../../utils/assist';
8 const prefixCls = 'ivu-menu'; 9 const prefixCls = 'ivu-menu';
9 10
10 export default { 11 export default {
@@ -19,6 +20,19 @@ @@ -19,6 +20,19 @@
19 return { 20 return {
20 prefixCls: prefixCls 21 prefixCls: prefixCls
21 }; 22 };
  23 + },
  24 + computed: {
  25 + parentSubmenuNum () {
  26 + return findComponentsUpward(this, 'Submenu').length;
  27 + },
  28 + hasParentSubmenu () {
  29 + return findComponentUpward(this, 'Submenu');
  30 + },
  31 + groupStyle () {
  32 + return this.hasParentSubmenu ? {
  33 + paddingLeft: 43 + (this.parentSubmenuNum - 1) * 28 + 'px'
  34 + } : {};
  35 + }
22 } 36 }
23 }; 37 };
24 </script> 38 </script>
src/components/menu/menu-item.vue
  Show/Hide comments   View file @b4c3794
1 <template> 1 <template>
2 - <li :class="classes" @click.stop="handleClick"><slot></slot></li> 2 + <li :class="classes" @click.stop="handleClick" :style="itemStyle"><slot></slot></li>
3 </template> 3 </template>
4 <script> 4 <script>
5 import Emitter from '../../mixins/emitter'; 5 import Emitter from '../../mixins/emitter';
  6 + import { findComponentUpward } from '../../utils/assist';
6 const prefixCls = 'ivu-menu'; 7 const prefixCls = 'ivu-menu';
  8 + import mixin from './mixin';
7 9
8 export default { 10 export default {
9 name: 'MenuItem', 11 name: 'MenuItem',
10 - mixins: [ Emitter ], 12 + mixins: [ Emitter, mixin ],
11 props: { 13 props: {
12 name: { 14 name: {
13 type: [String, Number], 15 type: [String, Number],
@@ -33,18 +35,18 @@ @@ -33,18 +35,18 @@
33 [`${prefixCls}-item-disabled`]: this.disabled 35 [`${prefixCls}-item-disabled`]: this.disabled
34 } 36 }
35 ]; 37 ];
  38 + },
  39 + itemStyle () {
  40 + return this.hasParentSubmenu ? {
  41 + paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
  42 + } : {};
36 } 43 }
37 }, 44 },
38 methods: { 45 methods: {
39 handleClick () { 46 handleClick () {
40 if (this.disabled) return; 47 if (this.disabled) return;
41 48
42 - let parent = this.$parent;  
43 - let name = parent.$options.name;  
44 - while (parent && (!name || name !== 'Submenu')) {  
45 - parent = parent.$parent;  
46 - if (parent) name = parent.$options.name;  
47 - } 49 + let parent = findComponentUpward(this, 'Submenu');
48 50
49 if (parent) { 51 if (parent) {
50 this.dispatch('Submenu', 'on-menu-item-select', this.name); 52 this.dispatch('Submenu', 'on-menu-item-select', this.name);
@@ -57,7 +59,7 @@ @@ -57,7 +59,7 @@
57 this.$on('on-update-active-name', (name) => { 59 this.$on('on-update-active-name', (name) => {
58 if (this.name === name) { 60 if (this.name === name) {
59 this.active = true; 61 this.active = true;
60 - this.dispatch('Submenu', 'on-update-active-name', true); 62 + this.dispatch('Submenu', 'on-update-active-name', name);
61 } else { 63 } else {
62 this.active = false; 64 this.active = false;
63 } 65 }
src/components/menu/menu.vue
  Show/Hide comments   View file @b4c3794
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <ul :class="classes" :style="styles"><slot></slot></ul> 2 <ul :class="classes" :style="styles"><slot></slot></ul>
3 </template> 3 </template>
4 <script> 4 <script>
5 - import { oneOf, findComponentsDownward } from '../../utils/assist'; 5 + import { oneOf, findComponentsDownward, findBrothersComponents } from '../../utils/assist';
6 import Emitter from '../../mixins/emitter'; 6 import Emitter from '../../mixins/emitter';
7 7
8 const prefixCls = 'ivu-menu'; 8 const prefixCls = 'ivu-menu';
@@ -82,7 +82,14 @@ @@ -82,7 +82,14 @@
82 } else { 82 } else {
83 this.openNames.push(name); 83 this.openNames.push(name);
84 if (this.accordion) { 84 if (this.accordion) {
85 - this.openNames.splice(0, this.openNames.length); 85 + let currentSubmenu = {};
  86 + findComponentsDownward(this, 'Submenu').forEach(item => {
  87 + if (item.name === name) currentSubmenu = item;
  88 + });
  89 + findBrothersComponents(currentSubmenu, 'Submenu').forEach(item => {
  90 + let index = this.openNames.indexOf(item.name);
  91 + this.openNames.splice(index, index >= 0 ? 1 : 0);
  92 + });
86 this.openNames.push(name); 93 this.openNames.push(name);
87 } 94 }
88 } 95 }
src/components/menu/mixin.js 0 → 100644
  Show/Hide comments   View file @b4c3794
  1 +import { findComponentUpward, findComponentsUpward } from '../../utils/assist';
  2 +export default {
  3 + computed: {
  4 + hasParentSubmenu () {
  5 + return findComponentUpward(this, 'Submenu');
  6 + },
  7 + parentSubmenuNum () {
  8 + return findComponentsUpward(this, 'Submenu').length;
  9 + }
  10 + }
  11 +};
0 \ No newline at end of file 12 \ No newline at end of file
src/components/menu/submenu.vue
  Show/Hide comments   View file @b4c3794
1 <template> 1 <template>
2 <li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"> 2 <li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
3 - <div :class="[prefixCls + '-submenu-title']" ref="reference" @click="handleClick"> 3 + <div :class="[prefixCls + '-submenu-title']" ref="reference" @click.stop="handleClick" :style="titleStyle">
4 <slot name="title"></slot> 4 <slot name="title"></slot>
5 <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon> 5 <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
6 </div> 6 </div>
@@ -21,14 +21,15 @@ @@ -21,14 +21,15 @@
21 import Drop from '../select/dropdown.vue'; 21 import Drop from '../select/dropdown.vue';
22 import Icon from '../icon/icon.vue'; 22 import Icon from '../icon/icon.vue';
23 import CollapseTransition from '../base/collapse-transition'; 23 import CollapseTransition from '../base/collapse-transition';
24 - import { getStyle, findComponentUpward } from '../../utils/assist'; 24 + import { getStyle, findComponentUpward, findComponentsDownward } from '../../utils/assist';
25 import Emitter from '../../mixins/emitter'; 25 import Emitter from '../../mixins/emitter';
  26 + import mixin from './mixin';
26 27
27 const prefixCls = 'ivu-menu'; 28 const prefixCls = 'ivu-menu';
28 29
29 export default { 30 export default {
30 name: 'Submenu', 31 name: 'Submenu',
31 - mixins: [ Emitter ], 32 + mixins: [ Emitter, mixin ],
32 components: { Icon, Drop, CollapseTransition }, 33 components: { Icon, Drop, CollapseTransition },
33 props: { 34 props: {
34 name: { 35 name: {
@@ -54,9 +55,11 @@ @@ -54,9 +55,11 @@
54 return [ 55 return [
55 `${prefixCls}-submenu`, 56 `${prefixCls}-submenu`,
56 { 57 {
57 - [`${prefixCls}-item-active`]: this.active, 58 + [`${prefixCls}-item-active`]: this.active && !this.hasParentSubmenu,
58 [`${prefixCls}-opened`]: this.opened, 59 [`${prefixCls}-opened`]: this.opened,
59 - [`${prefixCls}-submenu-disabled`]: this.disabled 60 + [`${prefixCls}-submenu-disabled`]: this.disabled,
  61 + [`${prefixCls}-submenu-has-parent-submenu`]: this.hasParentSubmenu,
  62 + [`${prefixCls}-child-item-active`]: this.active
60 } 63 }
61 ]; 64 ];
62 }, 65 },
@@ -71,6 +74,11 @@ @@ -71,6 +74,11 @@
71 74
72 if (this.dropWidth) style.minWidth = `${this.dropWidth}px`; 75 if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
73 return style; 76 return style;
  77 + },
  78 + titleStyle () {
  79 + return this.hasParentSubmenu ? {
  80 + paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
  81 + } : {};
74 } 82 }
75 }, 83 },
76 methods: { 84 methods: {
@@ -99,7 +107,7 @@ @@ -99,7 +107,7 @@
99 if (this.mode === 'horizontal') return; 107 if (this.mode === 'horizontal') return;
100 const opened = this.opened; 108 const opened = this.opened;
101 if (this.accordion) { 109 if (this.accordion) {
102 - this.parent.$children.forEach(item => { 110 + this.$parent.$children.forEach(item => {
103 if (item.$options.name === 'Submenu') item.opened = false; 111 if (item.$options.name === 'Submenu') item.opened = false;
104 }); 112 });
105 } 113 }
@@ -131,6 +139,10 @@ @@ -131,6 +139,10 @@
131 return true; 139 return true;
132 }); 140 });
133 this.$on('on-update-active-name', (status) => { 141 this.$on('on-update-active-name', (status) => {
  142 + if (findComponentUpward(this, 'Submenu')) this.dispatch('Submenu', 'on-update-active-name', status);
  143 + if (findComponentsDownward(this, 'Submenu')) findComponentsDownward(this, 'Submenu').forEach(item => {
  144 + item.active = false;
  145 + });
134 this.active = status; 146 this.active = status;
135 }); 147 });
136 } 148 }
src/styles/components/menu.less
  Show/Hide comments   View file @b4c3794
@@ -160,13 +160,18 @@ @@ -160,13 +160,18 @@
160 &-submenu-title-icon { 160 &-submenu-title-icon {
161 transition: transform @transition-time @ease-in-out; 161 transition: transform @transition-time @ease-in-out;
162 } 162 }
163 - &-opened &-submenu-title-icon{ 163 + &-opened > * > &-submenu-title-icon{
164 transform: rotate(180deg); 164 transform: rotate(180deg);
165 } 165 }
166 166
167 - &-vertical &-submenu &-item{  
168 - padding-left: 43px;  
169 - } 167 + &-vertical &-submenu{
  168 + &-nested{
  169 + padding-left: 20px;
  170 + }
  171 + .@{menu-prefix-cls}-item{
  172 + padding-left: 43px;
  173 + }
  174 + }
170 &-vertical &-item-group{ 175 &-vertical &-item-group{
171 &-title{ 176 &-title{
172 height: 48px; 177 height: 48px;
@@ -217,7 +222,10 @@ @@ -217,7 +222,10 @@
217 background: @primary-color !important; 222 background: @primary-color !important;
218 } 223 }
219 } 224 }
220 - &-dark&-vertical &-item-active &-submenu-title{ 225 + // &-dark&-vertical &-item-active &-submenu-title{
  226 + // color: #fff;
  227 + // }
  228 + &-dark&-vertical &-child-item-active > &-submenu-title{
221 color: #fff; 229 color: #fff;
222 } 230 }
223 231
@@ -226,6 +234,12 @@ @@ -226,6 +234,12 @@
226 .@{menu-prefix-cls}-submenu-title{ 234 .@{menu-prefix-cls}-submenu-title{
227 background: @menu-dark-title; 235 background: @menu-dark-title;
228 } 236 }
  237 +
  238 + .@{menu-prefix-cls}-submenu-has-parent-submenu{
  239 + .@{menu-prefix-cls}-submenu-title{
  240 + background: transparent;
  241 + }
  242 + }
229 } 243 }
230 } 244 }
231 .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls); 245 .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);
src/utils/assist.js
  Show/Hide comments   View file @b4c3794
@@ -217,6 +217,27 @@ export function findComponentsDownward (context, componentName) { @@ -217,6 +217,27 @@ export function findComponentsDownward (context, componentName) {
217 }, []); 217 }, []);
218 } 218 }
219 219
  220 +// Find components upward
  221 +export function findComponentsUpward (context, componentName) {
  222 + let parents = [];
  223 + if (context.$parent) {
  224 + if (context.$parent.$options.name === componentName) parents.push(context.$parent);
  225 + return parents.concat(findComponentsUpward(context.$parent, componentName));
  226 + } else {
  227 + return [];
  228 + }
  229 +}
  230 +
  231 +// Find brothers components
  232 +export function findBrothersComponents (context, componentName) {
  233 + let res = context.$parent.$children.filter(item => {
  234 + return item.$options.name === componentName;
  235 + });
  236 + let index = res.indexOf(context);
  237 + res.splice(index, 1);
  238 + return res;
  239 +}
  240 +
220 /* istanbul ignore next */ 241 /* istanbul ignore next */
221 const trim = function(string) { 242 const trim = function(string) {
222 return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, ''); 243 return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');