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
package.json
  Show/Hide comments   View file @fc3ffbe
1 1 {
2 2 "name": "iview",
3   - "version": "0.9.10-rc-1",
  3 + "version": "0.9.10-rc-2",
4 4 "title": "iView",
5 5 "description": "A high quality UI components Library with Vue.js",
6 6 "homepage": "http://www.iviewui.com",
... ...
src/components/menu/menu-group.vue
  Show/Hide comments   View file @fc3ffbe
... ... @@ -19,12 +19,6 @@
19 19 return {
20 20 prefixCls: prefixCls
21 21 }
22   - },
23   - computed: {
24   -
25   - },
26   - methods: {
27   -
28 22 }
29 23 }
30 24 </script>
31 25 \ No newline at end of file
... ...
src/components/menu/menu.vue
  Show/Hide comments   View file @fc3ffbe
1 1 <template>
2   - <ul :class="classes"><slot></slot></ul>
  2 + <ul :class="classes" :style="styles"><slot></slot></ul>
3 3 </template>
4 4 <script>
5 5 import { oneOf } from '../../utils/assist';
... ... @@ -32,11 +32,10 @@
32 32 accordion: {
33 33 type: Boolean,
34 34 default: false
35   - }
36   - },
37   - data () {
38   - return {
39   -
  35 + },
  36 + width: {
  37 + type: String,
  38 + default: '240px'
40 39 }
41 40 },
42 41 computed: {
... ... @@ -51,12 +50,21 @@
51 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 62 methods: {
57 63 updateActiveKey () {
58 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 69 if (item.$options.name === 'Submenu') {
62 70 item.active = false;
... ... @@ -95,10 +103,18 @@
95 103 } else {
96 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 115 compiled () {
101 116 this.updateActiveKey();
  117 + this.updateOpened();
102 118 },
103 119 events: {
104 120 'on-menu-item-select' (key) {
... ...
src/styles/common/article.less
  Show/Hide comments   View file @fc3ffbe
... ... @@ -41,7 +41,7 @@
41 41 margin-bottom: 5px;
42 42 font-size: 14px;
43 43 }
44   - ul ul, ol ul{
  44 + ul ul:not([class^="ivu-"]), ol ul:not([class^="ivu-"]){
45 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 29 }
30 30 }
31 31 &-vertical{
32   - width: 240px;
33 32 &.@{menu-prefix-cls}-light{
34 33 &:after{
35 34 content: '';
... ... @@ -125,8 +124,13 @@
125 124 padding-left: 8px;
126 125 font-size: @font-size-small;
127 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 187  
184 188 &-dark&-vertical &-item, &-dark&-vertical &-submenu-title{
185 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 193 background: @menu-dark-active-bg;
188 194 }
  195 + &:hover{
  196 + color: #fff;
  197 + background: @title-color;
  198 + }
189 199 &-active:not(.@{menu-prefix-cls}-submenu){
190 200 color: @primary-color;
191 201 border-right: 2px solid @primary-color;
... ... @@ -194,16 +204,23 @@
194 204 &-dark&-vertical &-submenu &-item{
195 205 &:hover{
196 206 color: #fff;
  207 + background: transparent !important;
197 208 }
198   - &-active{
  209 + &-active,&-active:hover{
199 210 border-right: none;
200 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 219 &-dark&-vertical &-opened{
206 220 background: @menu-dark-active-bg;
  221 + .@{menu-prefix-cls}-submenu-title{
  222 + background: @title-color;
  223 + }
207 224 }
208 225 }
209 226 .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);
210 227 \ No newline at end of file
... ...
test/routers/menu.vue
  Show/Hide comments   View file @fc3ffbe
1 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 47 </template>
118 48 <script>
119 49 export default {
120   - props: {},
121 50 data () {
122 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 56 \ No newline at end of file
  57 +</script>
... ...