other / mew-iview

Commit fc3ffbe08d848f147041b6af8d4cdb4e48b0d997

Authored by 梁灏
1 parent fd5cd823

publish 0.9.10-rc-2 

publish 0.9.10-rc-2
Showing 6 changed files with 95 additions and 149 deletions   Show diff stats
Inline Side-by-side
1 { 1 {
2 "name": "iview", 2 "name": "iview",
3 - "version": "0.9.10-rc-1", 3 + "version": "0.9.10-rc-2",
4 "title": "iView", 4 "title": "iView",
5 "description": "A high quality UI components Library with Vue.js", 5 "description": "A high quality UI components Library with Vue.js",
6 "homepage": "http://www.iviewui.com", 6 "homepage": "http://www.iviewui.com",
src/components/menu/menu-group.vue
  Show/Hide comments   View file @fc3ffbe
@@ -19,12 +19,6 @@ @@ -19,12 +19,6 @@
19 return { 19 return {
20 prefixCls: prefixCls 20 prefixCls: prefixCls
21 } 21 }
22 - },  
23 - computed: {  
24 -  
25 - },  
26 - methods: {  
27 -  
28 } 22 }
29 } 23 }
30 </script> 24 </script>
31 \ No newline at end of file 25 \ No newline at end of file
src/components/menu/menu.vue
  Show/Hide comments   View file @fc3ffbe
1 <template> 1 <template>
2 - <ul :class="classes"><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 } from '../../utils/assist';
@@ -32,11 +32,10 @@ @@ -32,11 +32,10 @@
32 accordion: { 32 accordion: {
33 type: Boolean, 33 type: Boolean,
34 default: false 34 default: false
35 - }  
36 - },  
37 - data () {  
38 - return {  
39 - 35 + },
  36 + width: {
  37 + type: String,
  38 + default: '240px'
40 } 39 }
41 }, 40 },
42 computed: { 41 computed: {
@@ -51,12 +50,21 @@ @@ -51,12 +50,21 @@
51 [`${prefixCls}-${this.mode}`]: this.mode 50 [`${prefixCls}-${this.mode}`]: this.mode
52 } 51 }
53 ] 52 ]
  53 + },
  54 + styles () {
  55 + let style = {};
  56 +
  57 + if (this.mode === 'vertical') style.width = this.width;
  58 +
  59 + return style;
54 } 60 }
55 }, 61 },
56 methods: { 62 methods: {
57 updateActiveKey () { 63 updateActiveKey () {
58 this.$children.forEach((item, index) => { 64 this.$children.forEach((item, index) => {
59 - if (!this.activeKey && index === 0) this.activeKey = item.key; 65 + if (!this.activeKey && index === 0) {
  66 + this.activeKey = -1;
  67 + }
60 68
61 if (item.$options.name === 'Submenu') { 69 if (item.$options.name === 'Submenu') {
62 item.active = false; 70 item.active = false;
@@ -95,10 +103,18 @@ @@ -95,10 +103,18 @@
95 } else { 103 } else {
96 this.openKeys.push(key); 104 this.openKeys.push(key);
97 } 105 }
  106 + },
  107 + updateOpened () {
  108 + this.$children.forEach(item => {
  109 + if (item.$options.name === 'Submenu') {
  110 + if (this.openKeys.indexOf(item.key) > -1) item.opened = true;
  111 + }
  112 + })
98 } 113 }
99 }, 114 },
100 compiled () { 115 compiled () {
101 this.updateActiveKey(); 116 this.updateActiveKey();
  117 + this.updateOpened();
102 }, 118 },
103 events: { 119 events: {
104 'on-menu-item-select' (key) { 120 'on-menu-item-select' (key) {
src/styles/common/article.less
  Show/Hide comments   View file @fc3ffbe
@@ -41,7 +41,7 @@ @@ -41,7 +41,7 @@
41 margin-bottom: 5px; 41 margin-bottom: 5px;
42 font-size: 14px; 42 font-size: 14px;
43 } 43 }
44 - ul ul, ol ul{ 44 + ul ul:not([class^="ivu-"]), ol ul:not([class^="ivu-"]){
45 list-style-type: circle; 45 list-style-type: circle;
46 } 46 }
47 47
src/styles/components/menu.less
  Show/Hide comments   View file @fc3ffbe
@@ -29,7 +29,6 @@ @@ -29,7 +29,6 @@
29 } 29 }
30 } 30 }
31 &-vertical{ 31 &-vertical{
32 - width: 240px;  
33 &.@{menu-prefix-cls}-light{ 32 &.@{menu-prefix-cls}-light{
34 &:after{ 33 &:after{
35 content: ''; 34 content: '';
@@ -125,8 +124,13 @@ @@ -125,8 +124,13 @@
125 padding-left: 8px; 124 padding-left: 8px;
126 font-size: @font-size-small; 125 font-size: @font-size-small;
127 color: @legend-color; 126 color: @legend-color;
128 - height: 30px;  
129 - line-height: 30px; 127 + height: 48px;
  128 + line-height: 48px;
  129 + }
  130 +
  131 + & > ul{
  132 + padding: 0 !important;
  133 + list-style: none !important;
130 } 134 }
131 } 135 }
132 136
@@ -183,9 +187,15 @@ @@ -183,9 +187,15 @@
183 187
184 &-dark&-vertical &-item, &-dark&-vertical &-submenu-title{ 188 &-dark&-vertical &-item, &-dark&-vertical &-submenu-title{
185 color: @subsidiary-color; 189 color: @subsidiary-color;
186 - &-active:not(.@{menu-prefix-cls}-submenu), &:hover{ 190 + &-active:not(.@{menu-prefix-cls}-submenu),
  191 + &-active:not(.@{menu-prefix-cls}-submenu):hover
  192 + {
187 background: @menu-dark-active-bg; 193 background: @menu-dark-active-bg;
188 } 194 }
  195 + &:hover{
  196 + color: #fff;
  197 + background: @title-color;
  198 + }
189 &-active:not(.@{menu-prefix-cls}-submenu){ 199 &-active:not(.@{menu-prefix-cls}-submenu){
190 color: @primary-color; 200 color: @primary-color;
191 border-right: 2px solid @primary-color; 201 border-right: 2px solid @primary-color;
@@ -194,16 +204,23 @@ @@ -194,16 +204,23 @@
194 &-dark&-vertical &-submenu &-item{ 204 &-dark&-vertical &-submenu &-item{
195 &:hover{ 205 &:hover{
196 color: #fff; 206 color: #fff;
  207 + background: transparent !important;
197 } 208 }
198 - &-active{ 209 + &-active,&-active:hover{
199 border-right: none; 210 border-right: none;
200 color: #fff; 211 color: #fff;
201 - background: @primary-color; 212 + background: @primary-color !important;
202 } 213 }
203 } 214 }
  215 + &-dark&-vertical &-item-active &-submenu-title{
  216 + color: #fff;
  217 + }
204 218
205 &-dark&-vertical &-opened{ 219 &-dark&-vertical &-opened{
206 background: @menu-dark-active-bg; 220 background: @menu-dark-active-bg;
  221 + .@{menu-prefix-cls}-submenu-title{
  222 + background: @title-color;
  223 + }
207 } 224 }
208 } 225 }
209 .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls); 226 .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);
210 \ No newline at end of file 227 \ No newline at end of file
test/routers/menu.vue
  Show/Hide comments   View file @fc3ffbe
1 <template> 1 <template>
2 - <div>  
3 - <Menu mode="horizontal" :theme="theme" active-key="1">  
4 - <Menu-item key="1">  
5 - <Icon type="ionic"></Icon><span>导航一</span>  
6 - </Menu-item>  
7 - <Menu-item key="2">导航二</Menu-item>  
8 - <Submenu key="3">  
9 - <template slot="title"><Icon type="ionic"></Icon>导航三</template>  
10 - <Menu-group title="集合1">  
11 - <Menu-item key="3-1">导航三 - 一</Menu-item>  
12 - <Menu-item key="3-2">导航三 - 二</Menu-item>  
13 - </Menu-group>  
14 - <Menu-group title="集合2">  
15 - <Menu-item key="3-3">导航三 - 三</Menu-item>  
16 - <Menu-item key="3-4">导航三 - 四</Menu-item>  
17 - </Menu-group>  
18 - </Submenu>  
19 - <Menu-item key="4">导航四</Menu-item>  
20 - </Menu>  
21 - <br><br>  
22 - <Radio-group :model.sync="theme">  
23 - <Radio value="light"></Radio>  
24 - <Radio value="dark"></Radio>  
25 - <Radio value="primary"></Radio>  
26 - </Radio-group>  
27 - <br><br>  
28 - <Menu :mode="mode" :theme="theme" active-key="1" @on-open-change="change">  
29 - <Menu-item key="1">  
30 - <Icon type="ionic"></Icon>  
31 - <span>导航一</span>  
32 - </Menu-item>  
33 - <Menu-group title="集合1">  
34 - <Menu-item key="2">  
35 - <Icon type="ionic"></Icon>  
36 - 导航二  
37 - </Menu-item>  
38 - <Menu-item key="3">导航三</Menu-item>  
39 - </Menu-group>  
40 - <Menu-group title="集合2">  
41 - <Menu-item key="4">导航四</Menu-item>  
42 - <Menu-item key="5">导航五</Menu-item>  
43 - </Menu-group>  
44 - <Submenu key="6">  
45 - <template slot="title"><Icon type="ionic"></Icon>导航六</template>  
46 - <Menu-group title="集合1">  
47 - <Menu-item key="3-1">导航三 - 一</Menu-item>  
48 - <Menu-item key="3-2">导航三 - 二</Menu-item>  
49 - </Menu-group>  
50 - <Menu-group title="集合2">  
51 - <Menu-item key="3-3">导航三 - 三</Menu-item>  
52 - <Menu-item key="3-4">导航三 - 四</Menu-item>  
53 - </Menu-group>  
54 - </Submenu>  
55 - <Submenu key="7">  
56 - <template slot="title"><Icon type="ionic"></Icon>导航七</template>  
57 - <Menu-group title="集合1">  
58 - <Menu-item key="7-1">导航三 - 一</Menu-item>  
59 - <Menu-item key="7-2">导航三 - 二</Menu-item>  
60 - </Menu-group>  
61 - <Menu-group title="集合2">  
62 - <Menu-item key="7-3">导航三 - 三</Menu-item>  
63 - <Menu-item key="7-4">导航三 - 四</Menu-item>  
64 - </Menu-group>  
65 - </Submenu>  
66 - </Menu>  
67 - <!--<Menu :mode="mode" active-key="1">-->  
68 - <!--<Menu-item key="1">-->  
69 - <!--<Icon type="ionic"></Icon>-->  
70 - <!--<span>导航一</span>-->  
71 - <!--</Menu-item>-->  
72 - <!--<Menu-item key="2">导航二</Menu-item>-->  
73 - <!--<Submenu key="3">-->  
74 - <!--<template slot="title"><Icon type="ionic"></Icon><span>导航三</span></template>-->  
75 - <!--<Menu-group title="集合1">-->  
76 - <!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->  
77 - <!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->  
78 - <!--</Menu-group>-->  
79 - <!--<Menu-group title="集合2">-->  
80 - <!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->  
81 - <!--<Menu-item key="3-4">导航三 - 四</Menu-item>-->  
82 - <!--</Menu-group>-->  
83 - <!--</Submenu>-->  
84 - <!--<Menu-item key="4">导航四</Menu-item>-->  
85 - <!--</Menu>-->  
86 - <!--<br><br>-->  
87 - <!--<Menu mode="horizontal" theme="dark" active-key="1">-->  
88 - <!--<Menu-item key="1">-->  
89 - <!--<Icon type="ionic"></Icon>-->  
90 - <!--<span>导航一</span>-->  
91 - <!--</Menu-item>-->  
92 - <!--<Menu-item key="2">导航二</Menu-item>-->  
93 - <!--<Submenu key="3">-->  
94 - <!--<span slot="title">导航三</span>-->  
95 - <!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->  
96 - <!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->  
97 - <!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->  
98 - <!--</Submenu>-->  
99 - <!--<Menu-item key="4">导航四</Menu-item>-->  
100 - <!--</Menu>-->  
101 - <!--<br><br>-->  
102 - <!--<Menu mode="horizontal" theme="primary" active-key="1">-->  
103 - <!--<Menu-item key="1">-->  
104 - <!--<Icon type="ionic"></Icon>-->  
105 - <!--<span>导航一</span>-->  
106 - <!--</Menu-item>-->  
107 - <!--<Menu-item key="2">导航二</Menu-item>-->  
108 - <!--<Submenu key="3">-->  
109 - <!--<span slot="title">导航三</span>-->  
110 - <!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->  
111 - <!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->  
112 - <!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->  
113 - <!--</Submenu>-->  
114 - <!--<Menu-item key="4">导航四</Menu-item>-->  
115 - <!--</Menu>-->  
116 - </div> 2 + <Row>
  3 + <i-col span="8">
  4 + <Menu :theme="theme2">
  5 + <Submenu key="1">
  6 + <template slot="title">
  7 + <Icon type="ios-paper"></Icon>
  8 + 内容管理
  9 + </template>
  10 + <Menu-item key="1-1">文章管理</Menu-item>
  11 + <Menu-item key="1-2">评论管理</Menu-item>
  12 + <Menu-item key="1-3">举报管理</Menu-item>
  13 + </Submenu>
  14 + <Submenu key="2">
  15 + <template slot="title">
  16 + <Icon type="ios-people"></Icon>
  17 + 用户管理
  18 + </template>
  19 + <Menu-item key="2-1">新增用户</Menu-item>
  20 + <Menu-item key="2-2">活跃用户</Menu-item>
  21 + </Submenu>
  22 + <Submenu key="3">
  23 + <template slot="title">
  24 + <Icon type="stats-bars"></Icon>
  25 + 统计分析
  26 + </template>
  27 + <Menu-group title="使用">
  28 + <Menu-item key="3-1">新增和启动</Menu-item>
  29 + <Menu-item key="3-2">活跃分析</Menu-item>
  30 + <Menu-item key="3-3">时段分析</Menu-item>
  31 + </Menu-group>
  32 + <Menu-group title="留存">
  33 + <Menu-item key="3-4">用户留存</Menu-item>
  34 + <Menu-item key="3-5">流失用户</Menu-item>
  35 + </Menu-group>
  36 + </Submenu>
  37 + </Menu>
  38 + </i-col>
  39 +
  40 + </Row>
  41 + <br>
  42 + <p>切换主题</p>
  43 + <Radio-group :model.sync="theme2">
  44 + <Radio value="light"></Radio>
  45 + <Radio value="dark"></Radio>
  46 + </Radio-group>
117 </template> 47 </template>
118 <script> 48 <script>
119 export default { 49 export default {
120 - props: {},  
121 data () { 50 data () {
122 return { 51 return {
123 - mode: 'vertical',  
124 - theme: 'dark'  
125 - }  
126 - },  
127 - computed: {},  
128 - methods: {  
129 - toggleMode () {  
130 - this.mode = this.mode === 'horizontal' ? 'vertical' : 'horizontal';  
131 - },  
132 - change (d) {  
133 - console.log(d) 52 + theme2: 'light'
134 } 53 }
135 } 54 }
136 } 55 }
137 -</script>  
138 \ No newline at end of file 56 \ No newline at end of file
  57 +</script>