Commit 105af4ee574d50a8b32ec82ec9fc8aa9c47d10c2
Committed by
GitHub

Merge pull request #2872 from lison16/menu
update Menu
Showing
5 changed files
with
19 additions
and
20 deletions
Show diff stats
examples/routers/menu.vue
1 | <template> | 1 | <template> |
2 | <div> | 2 | <div> |
3 | - <Menu :theme="theme1" active-name="1" accordion @on-select="handleSelect" @on-open-change="handleOpen" :open-names="openArr"> | 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 | 一级1 | 6 | 一级1 |
src/components/menu/menu-group.vue
@@ -5,11 +5,12 @@ | @@ -5,11 +5,12 @@ | ||
5 | </li> | 5 | </li> |
6 | </template> | 6 | </template> |
7 | <script> | 7 | <script> |
8 | - import { findComponentUpward, findComponentsUpward } from '../../utils/assist'; | 8 | + import mixin from './mixin'; |
9 | const prefixCls = 'ivu-menu'; | 9 | const prefixCls = 'ivu-menu'; |
10 | 10 | ||
11 | export default { | 11 | export default { |
12 | name: 'MenuGroup', | 12 | name: 'MenuGroup', |
13 | + mixins: [ mixin ], | ||
13 | props: { | 14 | props: { |
14 | title: { | 15 | title: { |
15 | type: String, | 16 | type: String, |
@@ -22,14 +23,8 @@ | @@ -22,14 +23,8 @@ | ||
22 | }; | 23 | }; |
23 | }, | 24 | }, |
24 | computed: { | 25 | computed: { |
25 | - parentSubmenuNum () { | ||
26 | - return findComponentsUpward(this, 'Submenu').length; | ||
27 | - }, | ||
28 | - hasParentSubmenu () { | ||
29 | - return findComponentUpward(this, 'Submenu'); | ||
30 | - }, | ||
31 | groupStyle () { | 26 | groupStyle () { |
32 | - return this.hasParentSubmenu ? { | 27 | + return this.hasParentSubmenu && this.mode !== 'horizontal' ? { |
33 | paddingLeft: 43 + (this.parentSubmenuNum - 1) * 28 + 'px' | 28 | paddingLeft: 43 + (this.parentSubmenuNum - 1) * 28 + 'px' |
34 | } : {}; | 29 | } : {}; |
35 | } | 30 | } |
src/components/menu/menu-item.vue
@@ -37,7 +37,7 @@ | @@ -37,7 +37,7 @@ | ||
37 | ]; | 37 | ]; |
38 | }, | 38 | }, |
39 | itemStyle () { | 39 | itemStyle () { |
40 | - return this.hasParentSubmenu ? { | 40 | + return this.hasParentSubmenu && this.mode !== 'horizontal' ? { |
41 | paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px' | 41 | paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px' |
42 | } : {}; | 42 | } : {}; |
43 | } | 43 | } |
src/components/menu/mixin.js
1 | import { findComponentUpward, findComponentsUpward } from '../../utils/assist'; | 1 | import { findComponentUpward, findComponentsUpward } from '../../utils/assist'; |
2 | export default { | 2 | export default { |
3 | + data () { | ||
4 | + return { | ||
5 | + menu: findComponentUpward(this, 'Menu') | ||
6 | + }; | ||
7 | + }, | ||
3 | computed: { | 8 | computed: { |
4 | hasParentSubmenu () { | 9 | hasParentSubmenu () { |
5 | return findComponentUpward(this, 'Submenu'); | 10 | return findComponentUpward(this, 'Submenu'); |
6 | }, | 11 | }, |
7 | parentSubmenuNum () { | 12 | parentSubmenuNum () { |
8 | return findComponentsUpward(this, 'Submenu').length; | 13 | return findComponentsUpward(this, 'Submenu').length; |
14 | + }, | ||
15 | + mode () { | ||
16 | + return this.menu.mode; | ||
9 | } | 17 | } |
10 | } | 18 | } |
11 | }; | 19 | }; |
12 | \ No newline at end of file | 20 | \ No newline at end of file |
src/components/menu/submenu.vue
@@ -46,8 +46,7 @@ | @@ -46,8 +46,7 @@ | ||
46 | prefixCls: prefixCls, | 46 | prefixCls: prefixCls, |
47 | active: false, | 47 | active: false, |
48 | opened: false, | 48 | opened: false, |
49 | - dropWidth: parseFloat(getStyle(this.$el, 'width')), | ||
50 | - parent: findComponentUpward(this, 'Menu') | 49 | + dropWidth: parseFloat(getStyle(this.$el, 'width')) |
51 | }; | 50 | }; |
52 | }, | 51 | }, |
53 | computed: { | 52 | computed: { |
@@ -63,11 +62,8 @@ | @@ -63,11 +62,8 @@ | ||
63 | } | 62 | } |
64 | ]; | 63 | ]; |
65 | }, | 64 | }, |
66 | - mode () { | ||
67 | - return this.parent.mode; | ||
68 | - }, | ||
69 | accordion () { | 65 | accordion () { |
70 | - return this.parent.accordion; | 66 | + return this.menu.accordion; |
71 | }, | 67 | }, |
72 | dropStyle () { | 68 | dropStyle () { |
73 | let style = {}; | 69 | let style = {}; |
@@ -76,7 +72,7 @@ | @@ -76,7 +72,7 @@ | ||
76 | return style; | 72 | return style; |
77 | }, | 73 | }, |
78 | titleStyle () { | 74 | titleStyle () { |
79 | - return this.hasParentSubmenu ? { | 75 | + return this.hasParentSubmenu && this.mode !== 'horizontal' ? { |
80 | paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px' | 76 | paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px' |
81 | } : {}; | 77 | } : {}; |
82 | } | 78 | } |
@@ -88,7 +84,7 @@ | @@ -88,7 +84,7 @@ | ||
88 | 84 | ||
89 | clearTimeout(this.timeout); | 85 | clearTimeout(this.timeout); |
90 | this.timeout = setTimeout(() => { | 86 | this.timeout = setTimeout(() => { |
91 | - this.parent.updateOpenKeys(this.name); | 87 | + this.menu.updateOpenKeys(this.name); |
92 | this.opened = true; | 88 | this.opened = true; |
93 | }, 250); | 89 | }, 250); |
94 | }, | 90 | }, |
@@ -98,7 +94,7 @@ | @@ -98,7 +94,7 @@ | ||
98 | 94 | ||
99 | clearTimeout(this.timeout); | 95 | clearTimeout(this.timeout); |
100 | this.timeout = setTimeout(() => { | 96 | this.timeout = setTimeout(() => { |
101 | - this.parent.updateOpenKeys(this.name); | 97 | + this.menu.updateOpenKeys(this.name); |
102 | this.opened = false; | 98 | this.opened = false; |
103 | }, 150); | 99 | }, 150); |
104 | }, | 100 | }, |
@@ -112,7 +108,7 @@ | @@ -112,7 +108,7 @@ | ||
112 | }); | 108 | }); |
113 | } | 109 | } |
114 | this.opened = !opened; | 110 | this.opened = !opened; |
115 | - this.parent.updateOpenKeys(this.name); | 111 | + this.menu.updateOpenKeys(this.name); |
116 | } | 112 | } |
117 | }, | 113 | }, |
118 | watch: { | 114 | watch: { |