chenhaodong / mew-iview

Commit 0f4ccf4486c81077d054b24c65dbe272f8807e4c

Authored by 梁灏
1 parent 1c821c09

release 0.9.9 

release 0.9.9
Showing 5 changed files with 72 additions and 211 deletions   Show diff stats
Inline Side-by-side
1 { 1 {
2 "name": "iview", 2 "name": "iview",
3 - "version": "0.9.9-rc-6", 3 + "version": "0.9.9",
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/table/table.vue
  Show/Hide comments   View file @0f4ccf4
@@ -147,7 +147,9 @@ @@ -147,7 +147,9 @@
147 return [ 147 return [
148 `${prefixCls}-wrapper`, 148 `${prefixCls}-wrapper`,
149 { 149 {
150 - [`${prefixCls}-hide`]: !this.ready 150 + [`${prefixCls}-hide`]: !this.ready,
  151 + [`${prefixCls}-with-header`]: this.showSlotHeader,
  152 + [`${prefixCls}-with-footer`]: this.showSlotFooter
151 } 153 }
152 ] 154 ]
153 }, 155 },
@@ -158,8 +160,6 @@ @@ -158,8 +160,6 @@
158 [`${prefixCls}-${this.size}`]: !!this.size, 160 [`${prefixCls}-${this.size}`]: !!this.size,
159 [`${prefixCls}-border`]: this.border, 161 [`${prefixCls}-border`]: this.border,
160 [`${prefixCls}-stripe`]: this.stripe, 162 [`${prefixCls}-stripe`]: this.stripe,
161 - [`${prefixCls}-with-header`]: this.showSlotHeader,  
162 - [`${prefixCls}-with-footer`]: this.showSlotFooter,  
163 [`${prefixCls}-with-fixed-top`]: !!this.height 163 [`${prefixCls}-with-fixed-top`]: !!this.height
164 } 164 }
165 ] 165 ]
src/styles/components/table.less
  Show/Hide comments   View file @0f4ccf4
@@ -46,16 +46,16 @@ @@ -46,16 +46,16 @@
46 } 46 }
47 47
48 &-with-header{ 48 &-with-header{
49 - border-radius: @border-radius-base @border-radius-base 0 0; 49 + //border-radius: @border-radius-base @border-radius-base 0 0;
50 } 50 }
51 51
52 &-with-footer{ 52 &-with-footer{
53 - border: 1px solid @border-color-base;  
54 - border-radius: 0 0 @border-radius-base @border-radius-base; 53 + //border: 1px solid @border-color-base;
  54 + //border-radius: 0 0 @border-radius-base @border-radius-base;
55 } 55 }
56 56
57 &-with-header&-with-footer{ 57 &-with-header&-with-footer{
58 - border-radius: @border-radius-base; 58 + //border-radius: @border-radius-base;
59 } 59 }
60 60
61 &-title, &-footer{ 61 &-title, &-footer{
test/routers/select.vue
  Show/Hide comments   View file @0f4ccf4
1 <template> 1 <template>
2 - <i-select :model.sync="model1" style="width:200px" clearable>  
3 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
4 - </i-select>  
5 - {{ model1 | json }}  
6 - <i-button @click="change">修改数据</i-button>  
7 - <i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange">  
8 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
9 - </i-select>  
10 - {{ model10 | json }}  
11 - <i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange">  
12 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
13 - </i-select>  
14 - {{ model11 | json }}  
15 - <i-select :model.sync="model12" filterable multiple style="width:240px" @on-change="datachange">  
16 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
17 - </i-select>  
18 - {{ model12 | json }}  
19 - <br><br>  
20 - <i-select :model.sync="model2" size="small" style="width:100px">  
21 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
22 - </i-select>  
23 - <i-select :model.sync="model3" style="width:100px">  
24 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
25 - </i-select>  
26 - <i-select :model.sync="model4" size="large" style="width:100px">  
27 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
28 - </i-select>  
29 - <i-select :model.sync="model7" style="width:200px">  
30 - <Option-group label="热门城市">  
31 - <i-option v-for="item in cityList | limitBy 3" :value="item.value">{{ item.label }}</i-option>  
32 - </Option-group>  
33 - <Option-group label="其它城市">  
34 - <i-option v-for="item in cityList | limitBy 3 3" :value="item.value">{{ item.label }}</i-option>  
35 - </Option-group>  
36 - </i-select> 2 + <Row style="margin: 100px">
  3 + <i-col span="12" style="padding-right:10px">
  4 + <i-select :model.sync="model11" filterable>
  5 + <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
  6 + </i-select>
  7 + </i-col>
  8 + <i-col span="12">
  9 + <i-select :model.sync="model12" filterable multiple>
  10 + <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
  11 + </i-select>
  12 + </i-col>
  13 + </Row>
37 </template> 14 </template>
38 <script> 15 <script>
39 - import { iSelect, iOption, iButton, OptionGroup } from 'iview';  
40 export default { 16 export default {
41 - components: { iSelect, iOption, iButton, OptionGroup },  
42 data () { 17 data () {
43 return { 18 return {
44 cityList: [ 19 cityList: [
@@ -54,35 +29,21 @@ @@ -54,35 +29,21 @@
54 value: 'shenzhen', 29 value: 'shenzhen',
55 label: '深圳市' 30 label: '深圳市'
56 }, 31 },
57 -// {  
58 -// value: 'hangzhou',  
59 -// label: '杭州市'  
60 -// },  
61 -// {  
62 -// value: 'nanjing',  
63 -// label: '南京市'  
64 -// },  
65 -// {  
66 -// value: 'chongqing',  
67 -// label: '重庆市'  
68 -// } 32 + {
  33 + value: 'hangzhou',
  34 + label: '杭州市'
  35 + },
  36 + {
  37 + value: 'nanjing',
  38 + label: '南京市'
  39 + },
  40 + {
  41 + value: 'chongqing',
  42 + label: '重庆市'
  43 + }
69 ], 44 ],
70 - model1: '',  
71 - model10: [],  
72 model11: '', 45 model11: '',
73 - model12: [],  
74 - model2: '',  
75 - model3: '',  
76 - model4: '',  
77 - model7: ''  
78 - }  
79 - },  
80 - methods: {  
81 - change () {  
82 - this.cityList.splice(2, 1);  
83 - },  
84 - datachange (data) {  
85 - console.log(data); 46 + model12: []
86 } 47 }
87 } 48 }
88 } 49 }
test/routers/table.vue
  Show/Hide comments   View file @0f4ccf4
1 <template> 1 <template>
2 - <checkbox-group :model.sync="tableColumnsChecked" @on-change="changeTableColumns">  
3 - <checkbox value="show">展示</checkbox>  
4 - <checkbox value="weak">唤醒</checkbox>  
5 - <checkbox value="signin">登录</checkbox>  
6 - <checkbox value="click">点击</checkbox>  
7 - <checkbox value="active">激活</checkbox>  
8 - <checkbox value="day7">7日留存</checkbox>  
9 - <checkbox value="day30">30日留存</checkbox>  
10 - <checkbox value="tomorrow">次日留存</checkbox>  
11 - <checkbox value="day">日活跃</checkbox>  
12 - <checkbox value="week">周活跃</checkbox>  
13 - <checkbox value="month">月活跃</checkbox>  
14 - </checkbox-group>  
15 - <i-table :content="self" :data="tableData2" :columns="tableColumns2" border></i-table> 2 + <i-table border :columns="columns1" :data="data1">
  3 + <div slot="header">表格标题</div>
  4 + <div slot="footer">表格页脚</div>
  5 + </i-table>
16 </template> 6 </template>
17 <script> 7 <script>
18 export default { 8 export default {
19 data () { 9 data () {
20 return { 10 return {
21 - self: this,  
22 - tableData2: this.mockTableData2(),  
23 - tableColumns2: [],  
24 - tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month']  
25 - }  
26 - },  
27 - methods: {  
28 - mockTableData2 () {  
29 - let data = [];  
30 - function getNum() {  
31 - return Math.floor(Math.random () * 10000 + 1);  
32 - }  
33 - for (let i = 0; i < 10; i++) {  
34 - data.push({  
35 - name: '推广名称' + (i+1),  
36 - fav: 0,  
37 - show: getNum(),  
38 - weak: getNum(),  
39 - signin: getNum(),  
40 - click: getNum(),  
41 - active: getNum(),  
42 - day7: getNum(),  
43 - day30: getNum(),  
44 - tomorrow: getNum(),  
45 - day: getNum(),  
46 - week: getNum(),  
47 - month: getNum()  
48 - })  
49 - }  
50 - return data;  
51 - },  
52 - getTable2Columns () {  
53 - const table2ColumnList = {  
54 - name: {  
55 - title: '名称',  
56 - key: 'name',  
57 - fixed: 'left',  
58 - width: 200,  
59 - render (row, column, index) {  
60 - return `<Icon style="cursor: pointer" type="ios-star-outline" v-if="tableData2[${index}].fav === 0" @click="toggleFav(${index})"></Icon>  
61 - <Icon style="cursor: pointer;color:#f60" type="ios-star" v-if="tableData2[${index}].fav === 1" @click="toggleFav(${index})"></Icon>  
62 - <span>${row.name}</span>`;  
63 - }  
64 - },  
65 - show: {  
66 - title: '展示',  
67 - key: 'show',  
68 - width: 150,  
69 - sortable: true  
70 - },  
71 - weak: {  
72 - title: '唤醒',  
73 - key: 'weak',  
74 - width: 150,  
75 - sortable: true  
76 - },  
77 - signin: {  
78 - title: '登录',  
79 - key: 'signin',  
80 - width: 150,  
81 - sortable: true  
82 - },  
83 - click: {  
84 - title: '点击',  
85 - key: 'click',  
86 - width: 150,  
87 - sortable: true  
88 - },  
89 - active: {  
90 - title: '激活',  
91 - key: 'active',  
92 - width: 150,  
93 - sortable: true  
94 - },  
95 - day7: {  
96 - title: '7日留存',  
97 - key: 'day7',  
98 - width: 150,  
99 - sortable: true  
100 - },  
101 - day30: {  
102 - title: '30日留存',  
103 - key: 'day30',  
104 - width: 150,  
105 - sortable: true  
106 - },  
107 - tomorrow: {  
108 - title: '次日留存',  
109 - key: 'tomorrow',  
110 - width: 150,  
111 - sortable: true  
112 - },  
113 - day: {  
114 - title: '日活跃',  
115 - key: 'day',  
116 - width: 150,  
117 - sortable: true  
118 - },  
119 - week: {  
120 - title: '周活跃',  
121 - key: 'week',  
122 - width: 150,  
123 - sortable: true  
124 - },  
125 - month: {  
126 - title: '月活跃',  
127 - key: 'month',  
128 - width: 150,  
129 - sortable: true 11 + columns1: [
  12 + {
  13 + title: '姓名',
  14 + key: 'name'
  15 + },
  16 + {
  17 + title: '年龄',
  18 + key: 'age'
  19 + },
  20 + {
  21 + title: '地址',
  22 + key: 'address'
  23 + }
  24 + ],
  25 + data1: [
  26 + {
  27 + name: '王小明',
  28 + age: 18,
  29 + address: '北京市朝阳区芍药居'
  30 + },
  31 + {
  32 + name: '张小刚',
  33 + age: 25,
  34 + address: '北京市海淀区西二旗'
  35 + },
  36 + {
  37 + name: '李小红',
  38 + age: 30,
  39 + address: '上海市浦东新区世纪大道'
  40 + },
  41 + {
  42 + name: '周小伟',
  43 + age: 26,
  44 + address: '深圳市南山区深南大道'
130 } 45 }
131 - };  
132 -  
133 - let data = [table2ColumnList.name];  
134 -  
135 - this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));  
136 -  
137 - return data;  
138 - },  
139 - changeTableColumns () {  
140 - this.tableColumns2 = this.getTable2Columns();  
141 - },  
142 - toggleFav (index) {  
143 - this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0; 46 + ]
144 } 47 }
145 - },  
146 - ready () {  
147 - this.changeTableColumns();  
148 } 48 }
149 } 49 }
150 </script> 50 </script>