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 1 <template>
58 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 14 <Submenu name="3">
152 15 <template slot="title">
153 16 <Icon type="stats-bars"></Icon>
... ... @@ -163,14 +26,19 @@
163 26 <Menu-item name="3-5">流失用户</Menu-item>
164 27 </Menu-group>
165 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 36 <br>
170 37 <p>切换主题</p>
171   - <Radio-group v-model="theme2">
  38 + <Radio-group v-model="theme1">
172 39 <Radio label="light"></Radio>
173 40 <Radio label="dark"></Radio>
  41 + <Radio label="primary"></Radio>
174 42 </Radio-group>
175 43 </div>
176 44 </template>
... ... @@ -178,13 +46,149 @@
178 46 export default {
179 47 data () {
180 48 return {
181   - theme2: 'light'
  49 + theme1: 'light'
182 50 }
183 51 },
184 52 methods: {
185 53 s (s) {
186   - console.log(s);
  54 + console.log(s)
187 55 }
188 56 }
189 57 }
190 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 2 <ul :class="classes" :style="styles"><slot></slot></ul>
3 3 </template>
4 4 <script>
5   - import { oneOf } from '../../utils/assist';
  5 + import { oneOf, findComponentsDownward } from '../../utils/assist';
6 6 import Emitter from '../../mixins/emitter';
7 7  
8 8 const prefixCls = 'ivu-menu';
... ... @@ -84,11 +84,13 @@
84 84 }
85 85 },
86 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 91 if (this.openNames.indexOf(item.name) > -1) item.opened = true;
90   - }
91   - });
  92 + });
  93 + }
92 94 }
93 95 },
94 96 mounted () {
... ...
src/components/menu/submenu.vue
  Show/Hide comments   View file @67f4d8e
... ... @@ -17,7 +17,7 @@
17 17 <script>
18 18 import Drop from '../select/dropdown.vue';
19 19 import Icon from '../icon/icon.vue';
20   - import { getStyle } from '../../utils/assist';
  20 + import { getStyle, findComponentUpward } from '../../utils/assist';
21 21 import Emitter from '../../mixins/emitter';
22 22  
23 23 const prefixCls = 'ivu-menu';
... ... @@ -41,7 +41,8 @@
41 41 prefixCls: prefixCls,
42 42 active: false,
43 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 48 computed: {
... ... @@ -56,12 +57,10 @@
56 57 ];
57 58 },
58 59 mode () {
59   - // todo while
60   - return this.$parent.mode;
  60 + return this.parent.mode;
61 61 },
62 62 accordion () {
63   - // todo while
64   - return this.$parent.accordion;
  63 + return this.parent.accordion;
65 64 },
66 65 dropStyle () {
67 66 let style = {};
... ... @@ -77,8 +76,7 @@
77 76  
78 77 clearTimeout(this.timeout);
79 78 this.timeout = setTimeout(() => {
80   - // todo while
81   - this.$parent.updateOpenKeys(this.name);
  79 + this.parent.updateOpenKeys(this.name);
82 80 this.opened = true;
83 81 }, 250);
84 82 },
... ... @@ -88,8 +86,7 @@
88 86  
89 87 clearTimeout(this.timeout);
90 88 this.timeout = setTimeout(() => {
91   - // todo while
92   - this.$parent.updateOpenKeys(this.name);
  89 + this.parent.updateOpenKeys(this.name);
93 90 this.opened = false;
94 91 }, 150);
95 92 },
... ... @@ -98,14 +95,12 @@
98 95 if (this.mode === 'horizontal') return;
99 96 const opened = this.opened;
100 97 if (this.accordion) {
101   - // todo while
102   - this.$parent.$children.forEach(item => {
  98 + this.parent.$children.forEach(item => {
103 99 if (item.$options.name === 'Submenu') item.opened = false;
104 100 });
105 101 }
106 102 this.opened = !opened;
107   - // todo while
108   - this.$parent.updateOpenKeys(this.name);
  103 + this.parent.updateOpenKeys(this.name);
109 104 }
110 105 },
111 106 watch: {
... ...
src/components/radio/radio.vue
  Show/Hide comments   View file @67f4d8e
... ... @@ -68,7 +68,6 @@
68 68 }
69 69 },
70 70 mounted () {
71   - this.parent = findComponentUpward(this, 'RadioGroup');
72 71 if (this.parent) this.group = true;
73 72 if (!this.group) {
74 73 this.updateValue();
... ...