chenhaodong / mew-iview

Commit 67f4d8e76360539969a6d88bd16577684d29471b

Authored by 梁灏
1 parent ab22fd7c

update Menu 

update Menu
Showing 4 changed files with 174 additions and 174 deletions   Show diff stats
Inline Side-by-side
examples/routers/menu.vue
  Show/Hide comments   View file @67f4d8e
1 -<!--<template>-->  
2 - <!--<div>-->  
3 - <!--<Menu mode="horizontal" :theme="theme1" active-name="1" @on-select="s">-->  
4 - <!--<Menu-item name="1">-->  
5 - <!--<Icon type="ios-paper"></Icon>-->  
6 - <!--内容管理-->  
7 - <!--</Menu-item>-->  
8 - <!--<Menu-item name="2">-->  
9 - <!--<Icon type="ios-people"></Icon>-->  
10 - <!--用户管理-->  
11 - <!--</Menu-item>-->  
12 - <!--<Submenu name="3">-->  
13 - <!--<template slot="title">-->  
14 - <!--<Icon type="stats-bars"></Icon>-->  
15 - <!--统计分析-->  
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>-->  
26 - <!--</Submenu>-->  
27 - <!--<Menu-item name="4">-->  
28 - <!--<Icon type="settings"></Icon>-->  
29 - <!--综合设置-->  
30 - <!--</Menu-item>-->  
31 - <!--</Menu>-->  
32 - <!--<br>-->  
33 - <!--<p>切换主题</p>-->  
34 - <!--<Radio-group v-model="theme1">-->  
35 - <!--<Radio label="light"></Radio>-->  
36 - <!--<Radio label="dark"></Radio>-->  
37 - <!--<Radio label="primary"></Radio>-->  
38 - <!--</Radio-group>-->  
39 - <!--</div>-->  
40 -<!--</template>-->  
41 -<!--<script>-->  
42 - <!--export default {-->  
43 - <!--data () {-->  
44 - <!--return {-->  
45 - <!--theme1: 'light'-->  
46 - <!--}-->  
47 - <!--},-->  
48 - <!--methods: {-->  
49 - <!--s (s) {-->  
50 - <!--console.log(s)-->  
51 - <!--}-->  
52 - <!--}-->  
53 - <!--}-->  
54 -<!--</script>-->  
55 -  
56 -  
57 <template> 1 <template>
58 <div> 2 <div>
59 - <Row>  
60 - <i-col span="8">  
61 - <Menu :theme="theme2" @on-select="s">  
62 - <Submenu name="1">  
63 - <template slot="title">  
64 - <Icon type="ios-paper"></Icon>  
65 - 内容管理  
66 - </template>  
67 - <Menu-item name="1-1">文章管理</Menu-item>  
68 - <Menu-item name="1-2">评论管理</Menu-item>  
69 - <Menu-item name="1-3">举报管理</Menu-item>  
70 - </Submenu>  
71 - <Submenu name="2">  
72 - <template slot="title">  
73 - <Icon type="ios-people"></Icon>  
74 - 用户管理  
75 - </template>  
76 - <Menu-item name="2-1">新增用户</Menu-item>  
77 - <Menu-item name="2-2">活跃用户</Menu-item>  
78 - </Submenu>  
79 - <Submenu name="3">  
80 - <template slot="title">  
81 - <Icon type="stats-bars"></Icon>  
82 - 统计分析  
83 - </template>  
84 - <Menu-group title="使用">  
85 - <Menu-item name="3-1">新增和启动</Menu-item>  
86 - <Menu-item name="3-2">活跃分析</Menu-item>  
87 - <Menu-item name="3-3">时段分析</Menu-item>  
88 - </Menu-group>  
89 - <Menu-group title="留存">  
90 - <Menu-item name="3-4">用户留存</Menu-item>  
91 - <Menu-item name="3-5">流失用户</Menu-item>  
92 - </Menu-group>  
93 - </Submenu>  
94 - </Menu>  
95 - </i-col>  
96 - <i-col span="8">  
97 - <Menu :theme="theme2" active-name="1-2" :open-names="['1']" @on-select="s">  
98 - <Submenu name="1">  
99 - <template slot="title">  
100 - <Icon type="ios-paper"></Icon>  
101 - 内容管理  
102 - </template>  
103 - <Menu-item name="1-1">文章管理</Menu-item>  
104 - <Menu-item name="1-2">评论管理</Menu-item>  
105 - <Menu-item name="1-3">举报管理</Menu-item>  
106 - </Submenu>  
107 - <Submenu name="2">  
108 - <template slot="title">  
109 - <Icon type="ios-people"></Icon>  
110 - 用户管理  
111 - </template>  
112 - <Menu-item name="2-1">新增用户</Menu-item>  
113 - <Menu-item name="2-2">活跃用户</Menu-item>  
114 - </Submenu>  
115 - <Submenu name="3">  
116 - <template slot="title">  
117 - <Icon type="stats-bars"></Icon>  
118 - 统计分析  
119 - </template>  
120 - <Menu-group title="使用">  
121 - <Menu-item name="3-1">新增和启动</Menu-item>  
122 - <Menu-item name="3-2">活跃分析</Menu-item>  
123 - <Menu-item name="3-3">时段分析</Menu-item>  
124 - </Menu-group>  
125 - <Menu-group title="留存">  
126 - <Menu-item name="3-4">用户留存</Menu-item>  
127 - <Menu-item name="3-5">流失用户</Menu-item>  
128 - </Menu-group>  
129 - </Submenu>  
130 - </Menu>  
131 - </i-col>  
132 - <i-col span="8">  
133 - <Menu :theme="theme2" :open-names="['1']" accordion @on-select="s">  
134 - <Submenu name="1">  
135 - <template slot="title">  
136 - <Icon type="ios-paper"></Icon>  
137 - 内容管理  
138 - </template>  
139 - <Menu-item name="1-1">文章管理</Menu-item>  
140 - <Menu-item name="1-2">评论管理</Menu-item>  
141 - <Menu-item name="1-3">举报管理</Menu-item>  
142 - </Submenu>  
143 - <Submenu name="2">  
144 - <template slot="title">  
145 - <Icon type="ios-people"></Icon>  
146 - 用户管理  
147 - </template>  
148 - <Menu-item name="2-1">新增用户</Menu-item>  
149 - <Menu-item name="2-2">活跃用户</Menu-item>  
150 - </Submenu> 3 + <Menu mode="horizontal" :theme="theme1" active-name="1" @on-select="s">
  4 + <Row type="flex" justify="center" align="middle">
  5 + <i-col span="12">
  6 + <Menu-item name="1">
  7 + <Icon type="ios-paper"></Icon>
  8 + 内容管理
  9 + </Menu-item>
  10 + <Menu-item name="2">
  11 + <Icon type="ios-people"></Icon>
  12 + 用户管理
  13 + </Menu-item>
151 <Submenu name="3"> 14 <Submenu name="3">
152 <template slot="title"> 15 <template slot="title">
153 <Icon type="stats-bars"></Icon> 16 <Icon type="stats-bars"></Icon>
@@ -163,14 +26,19 @@ @@ -163,14 +26,19 @@
163 <Menu-item name="3-5">流失用户</Menu-item> 26 <Menu-item name="3-5">流失用户</Menu-item>
164 </Menu-group> 27 </Menu-group>
165 </Submenu> 28 </Submenu>
166 - </Menu>  
167 - </i-col>  
168 - </Row> 29 + <Menu-item name="4">
  30 + <Icon type="settings"></Icon>
  31 + 综合设置
  32 + </Menu-item>
  33 + </i-col>
  34 + </Row>
  35 + </Menu>
169 <br> 36 <br>
170 <p>切换主题</p> 37 <p>切换主题</p>
171 - <Radio-group v-model="theme2"> 38 + <Radio-group v-model="theme1">
172 <Radio label="light"></Radio> 39 <Radio label="light"></Radio>
173 <Radio label="dark"></Radio> 40 <Radio label="dark"></Radio>
  41 + <Radio label="primary"></Radio>
174 </Radio-group> 42 </Radio-group>
175 </div> 43 </div>
176 </template> 44 </template>
@@ -178,13 +46,149 @@ @@ -178,13 +46,149 @@
178 export default { 46 export default {
179 data () { 47 data () {
180 return { 48 return {
181 - theme2: 'light' 49 + theme1: 'light'
182 } 50 }
183 }, 51 },
184 methods: { 52 methods: {
185 s (s) { 53 s (s) {
186 - console.log(s); 54 + console.log(s)
187 } 55 }
188 } 56 }
189 } 57 }
190 </script> 58 </script>
  59 +
  60 +
  61 +<!--<template>-->
  62 + <!--<div>-->
  63 + <!--<Row>-->
  64 + <!--<i-col span="8">-->
  65 + <!--<Menu :theme="theme2" @on-select="s">-->
  66 + <!--<Submenu name="1">-->
  67 + <!--<template slot="title">-->
  68 + <!--<Icon type="ios-paper"></Icon>-->
  69 + <!--内容管理-->
  70 + <!--</template>-->
  71 + <!--<Menu-item name="1-1">文章管理</Menu-item>-->
  72 + <!--<Menu-item name="1-2">评论管理</Menu-item>-->
  73 + <!--<Menu-item name="1-3">举报管理</Menu-item>-->
  74 + <!--</Submenu>-->
  75 + <!--<Submenu name="2">-->
  76 + <!--<template slot="title">-->
  77 + <!--<Icon type="ios-people"></Icon>-->
  78 + <!--用户管理-->
  79 + <!--</template>-->
  80 + <!--<Menu-item name="2-1">新增用户</Menu-item>-->
  81 + <!--<Menu-item name="2-2">活跃用户</Menu-item>-->
  82 + <!--</Submenu>-->
  83 + <!--<Submenu name="3">-->
  84 + <!--<template slot="title">-->
  85 + <!--<Icon type="stats-bars"></Icon>-->
  86 + <!--统计分析-->
  87 + <!--</template>-->
  88 + <!--<Menu-group title="使用">-->
  89 + <!--<Menu-item name="3-1">新增和启动</Menu-item>-->
  90 + <!--<Menu-item name="3-2">活跃分析</Menu-item>-->
  91 + <!--<Menu-item name="3-3">时段分析</Menu-item>-->
  92 + <!--</Menu-group>-->
  93 + <!--<Menu-group title="留存">-->
  94 + <!--<Menu-item name="3-4">用户留存</Menu-item>-->
  95 + <!--<Menu-item name="3-5">流失用户</Menu-item>-->
  96 + <!--</Menu-group>-->
  97 + <!--</Submenu>-->
  98 + <!--</Menu>-->
  99 + <!--</i-col>-->
  100 + <!--<i-col span="8">-->
  101 + <!--<Menu :theme="theme2" active-name="1-2" :open-names="['1']" @on-select="s">-->
  102 + <!--<Submenu name="1">-->
  103 + <!--<template slot="title">-->
  104 + <!--<Icon type="ios-paper"></Icon>-->
  105 + <!--内容管理-->
  106 + <!--</template>-->
  107 + <!--<Menu-item name="1-1">文章管理</Menu-item>-->
  108 + <!--<Menu-item name="1-2">评论管理</Menu-item>-->
  109 + <!--<Menu-item name="1-3">举报管理</Menu-item>-->
  110 + <!--</Submenu>-->
  111 + <!--<Submenu name="2">-->
  112 + <!--<template slot="title">-->
  113 + <!--<Icon type="ios-people"></Icon>-->
  114 + <!--用户管理-->
  115 + <!--</template>-->
  116 + <!--<Menu-item name="2-1">新增用户</Menu-item>-->
  117 + <!--<Menu-item name="2-2">活跃用户</Menu-item>-->
  118 + <!--</Submenu>-->
  119 + <!--<Submenu name="3">-->
  120 + <!--<template slot="title">-->
  121 + <!--<Icon type="stats-bars"></Icon>-->
  122 + <!--统计分析-->
  123 + <!--</template>-->
  124 + <!--<Menu-group title="使用">-->
  125 + <!--<Menu-item name="3-1">新增和启动</Menu-item>-->
  126 + <!--<Menu-item name="3-2">活跃分析</Menu-item>-->
  127 + <!--<Menu-item name="3-3">时段分析</Menu-item>-->
  128 + <!--</Menu-group>-->
  129 + <!--<Menu-group title="留存">-->
  130 + <!--<Menu-item name="3-4">用户留存</Menu-item>-->
  131 + <!--<Menu-item name="3-5">流失用户</Menu-item>-->
  132 + <!--</Menu-group>-->
  133 + <!--</Submenu>-->
  134 + <!--</Menu>-->
  135 + <!--</i-col>-->
  136 + <!--<i-col span="8">-->
  137 + <!--<Menu :theme="theme2" :open-names="['1']" accordion @on-select="s">-->
  138 + <!--<Submenu name="1">-->
  139 + <!--<template slot="title">-->
  140 + <!--<Icon type="ios-paper"></Icon>-->
  141 + <!--内容管理-->
  142 + <!--</template>-->
  143 + <!--<Menu-item name="1-1">文章管理</Menu-item>-->
  144 + <!--<Menu-item name="1-2">评论管理</Menu-item>-->
  145 + <!--<Menu-item name="1-3">举报管理</Menu-item>-->
  146 + <!--</Submenu>-->
  147 + <!--<Submenu name="2">-->
  148 + <!--<template slot="title">-->
  149 + <!--<Icon type="ios-people"></Icon>-->
  150 + <!--用户管理-->
  151 + <!--</template>-->
  152 + <!--<Menu-item name="2-1">新增用户</Menu-item>-->
  153 + <!--<Menu-item name="2-2">活跃用户</Menu-item>-->
  154 + <!--</Submenu>-->
  155 + <!--<Submenu name="3">-->
  156 + <!--<template slot="title">-->
  157 + <!--<Icon type="stats-bars"></Icon>-->
  158 + <!--统计分析-->
  159 + <!--</template>-->
  160 + <!--<Menu-group title="使用">-->
  161 + <!--<Menu-item name="3-1">新增和启动</Menu-item>-->
  162 + <!--<Menu-item name="3-2">活跃分析</Menu-item>-->
  163 + <!--<Menu-item name="3-3">时段分析</Menu-item>-->
  164 + <!--</Menu-group>-->
  165 + <!--<Menu-group title="留存">-->
  166 + <!--<Menu-item name="3-4">用户留存</Menu-item>-->
  167 + <!--<Menu-item name="3-5">流失用户</Menu-item>-->
  168 + <!--</Menu-group>-->
  169 + <!--</Submenu>-->
  170 + <!--</Menu>-->
  171 + <!--</i-col>-->
  172 + <!--</Row>-->
  173 + <!--<br>-->
  174 + <!--<p>切换主题</p>-->
  175 + <!--<Radio-group v-model="theme2">-->
  176 + <!--<Radio label="light"></Radio>-->
  177 + <!--<Radio label="dark"></Radio>-->
  178 + <!--</Radio-group>-->
  179 + <!--</div>-->
  180 +<!--</template>-->
  181 +<!--<script>-->
  182 + <!--export default {-->
  183 + <!--data () {-->
  184 + <!--return {-->
  185 + <!--theme2: 'light'-->
  186 + <!--}-->
  187 + <!--},-->
  188 + <!--methods: {-->
  189 + <!--s (s) {-->
  190 + <!--console.log(s);-->
  191 + <!--}-->
  192 + <!--}-->
  193 + <!--}-->
  194 +<!--</script>-->
src/components/menu/menu.vue
  Show/Hide comments   View file @67f4d8e
@@ -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 } from '../../utils/assist'; 5 + import { oneOf, findComponentsDownward } 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';
@@ -84,11 +84,13 @@ @@ -84,11 +84,13 @@
84 } 84 }
85 }, 85 },
86 updateOpened () { 86 updateOpened () {
87 - this.$children.forEach(item => {  
88 - if (item.$options.name === 'Submenu') { 87 + const items = findComponentsDownward(this, 'Submenu');
  88 +
  89 + if (items.length) {
  90 + items.forEach(item => {
89 if (this.openNames.indexOf(item.name) > -1) item.opened = true; 91 if (this.openNames.indexOf(item.name) > -1) item.opened = true;
90 - }  
91 - }); 92 + });
  93 + }
92 } 94 }
93 }, 95 },
94 mounted () { 96 mounted () {
src/components/menu/submenu.vue
  Show/Hide comments   View file @67f4d8e
@@ -17,7 +17,7 @@ @@ -17,7 +17,7 @@
17 <script> 17 <script>
18 import Drop from '../select/dropdown.vue'; 18 import Drop from '../select/dropdown.vue';
19 import Icon from '../icon/icon.vue'; 19 import Icon from '../icon/icon.vue';
20 - import { getStyle } from '../../utils/assist'; 20 + import { getStyle, findComponentUpward } from '../../utils/assist';
21 import Emitter from '../../mixins/emitter'; 21 import Emitter from '../../mixins/emitter';
22 22
23 const prefixCls = 'ivu-menu'; 23 const prefixCls = 'ivu-menu';
@@ -41,7 +41,8 @@ @@ -41,7 +41,8 @@
41 prefixCls: prefixCls, 41 prefixCls: prefixCls,
42 active: false, 42 active: false,
43 opened: false, 43 opened: false,
44 - dropWidth: parseFloat(getStyle(this.$el, 'width')) 44 + dropWidth: parseFloat(getStyle(this.$el, 'width')),
  45 + parent: findComponentUpward(this, 'Menu')
45 }; 46 };
46 }, 47 },
47 computed: { 48 computed: {
@@ -56,12 +57,10 @@ @@ -56,12 +57,10 @@
56 ]; 57 ];
57 }, 58 },
58 mode () { 59 mode () {
59 - // todo while  
60 - return this.$parent.mode; 60 + return this.parent.mode;
61 }, 61 },
62 accordion () { 62 accordion () {
63 - // todo while  
64 - return this.$parent.accordion; 63 + return this.parent.accordion;
65 }, 64 },
66 dropStyle () { 65 dropStyle () {
67 let style = {}; 66 let style = {};
@@ -77,8 +76,7 @@ @@ -77,8 +76,7 @@
77 76
78 clearTimeout(this.timeout); 77 clearTimeout(this.timeout);
79 this.timeout = setTimeout(() => { 78 this.timeout = setTimeout(() => {
80 - // todo while  
81 - this.$parent.updateOpenKeys(this.name); 79 + this.parent.updateOpenKeys(this.name);
82 this.opened = true; 80 this.opened = true;
83 }, 250); 81 }, 250);
84 }, 82 },
@@ -88,8 +86,7 @@ @@ -88,8 +86,7 @@
88 86
89 clearTimeout(this.timeout); 87 clearTimeout(this.timeout);
90 this.timeout = setTimeout(() => { 88 this.timeout = setTimeout(() => {
91 - // todo while  
92 - this.$parent.updateOpenKeys(this.name); 89 + this.parent.updateOpenKeys(this.name);
93 this.opened = false; 90 this.opened = false;
94 }, 150); 91 }, 150);
95 }, 92 },
@@ -98,14 +95,12 @@ @@ -98,14 +95,12 @@
98 if (this.mode === 'horizontal') return; 95 if (this.mode === 'horizontal') return;
99 const opened = this.opened; 96 const opened = this.opened;
100 if (this.accordion) { 97 if (this.accordion) {
101 - // todo while  
102 - this.$parent.$children.forEach(item => { 98 + this.parent.$children.forEach(item => {
103 if (item.$options.name === 'Submenu') item.opened = false; 99 if (item.$options.name === 'Submenu') item.opened = false;
104 }); 100 });
105 } 101 }
106 this.opened = !opened; 102 this.opened = !opened;
107 - // todo while  
108 - this.$parent.updateOpenKeys(this.name); 103 + this.parent.updateOpenKeys(this.name);
109 } 104 }
110 }, 105 },
111 watch: { 106 watch: {
src/components/radio/radio.vue
  Show/Hide comments   View file @67f4d8e
@@ -68,7 +68,6 @@ @@ -68,7 +68,6 @@
68 } 68 }
69 }, 69 },
70 mounted () { 70 mounted () {
71 - this.parent = findComponentUpward(this, 'RadioGroup');  
72 if (this.parent) this.group = true; 71 if (this.parent) this.group = true;
73 if (!this.group) { 72 if (!this.group) {
74 this.updateValue(); 73 this.updateValue();