chenhaodong / mew-iview

Commit 5d08ddf27c645dda35a7447a1a6b2790bee23023

Authored by 梁灏
1 parent c97c42ab

support Progress & Upload 

support Progress & Upload
Showing 10 changed files with 136 additions and 62 deletions   Show diff stats
Inline Side-by-side
@@ -13,4 +13,8 @@ value 改为了 label，使用 v-model，废弃 checked @@ -13,4 +13,8 @@ value 改为了 label，使用 v-model，废弃 checked
13 ### Badge 13 ### Badge
14 class 改为了 className 14 class 改为了 className
15 ### InputNumber 15 ### InputNumber
16 -使用 v-model  
17 \ No newline at end of file 16 \ No newline at end of file
  17 +使用 v-model
  18 +### Progress (名称有警告)
  19 +新增 on-status-change 事件
  20 +### Upload
  21 +父级不能 computed Upload 的 fileList 了
18 \ No newline at end of file 22 \ No newline at end of file
@@ -33,14 +33,14 @@ @@ -33,14 +33,14 @@
33 - [ ] Transfer 33 - [ ] Transfer
34 - [x] InputNumber 34 - [x] InputNumber
35 - [ ] Rate 35 - [ ] Rate
36 -- [ ] Upload 36 +- [x] Upload
37 - [ ] Form 37 - [ ] Form
38 - [x] Alert 38 - [x] Alert
39 - [ ] Card 39 - [ ] Card
40 - [ ] Message 40 - [ ] Message
41 - [ ] Notice 41 - [ ] Notice
42 - [ ] Modal 42 - [ ] Modal
43 -- [ ] Progress 43 +- [x] Progress
44 - [x] Badge 44 - [x] Badge
45 - [ ] Collapse 45 - [ ] Collapse
46 - [x] Timeline 46 - [x] Timeline
src/components/progress/progress.vue
  Show/Hide comments   View file @5d08ddf
@@ -45,13 +45,18 @@ @@ -45,13 +45,18 @@
45 default: 10 45 default: 10
46 } 46 }
47 }, 47 },
  48 + data () {
  49 + return {
  50 + currentStatus: this.status
  51 + }
  52 + },
48 computed: { 53 computed: {
49 isStatus () { 54 isStatus () {
50 - return this.status == 'wrong' || this.status == 'success'; 55 + return this.currentStatus == 'wrong' || this.currentStatus == 'success';
51 }, 56 },
52 statusIcon () { 57 statusIcon () {
53 let type = ''; 58 let type = '';
54 - switch (this.status) { 59 + switch (this.currentStatus) {
55 case 'wrong': 60 case 'wrong':
56 type = 'ios-close'; 61 type = 'ios-close';
57 break; 62 break;
@@ -71,9 +76,9 @@ @@ -71,9 +76,9 @@
71 wrapClasses () { 76 wrapClasses () {
72 return [ 77 return [
73 `${prefixCls}`, 78 `${prefixCls}`,
74 - `${prefixCls}-${this.status}`, 79 + `${prefixCls}-${this.currentStatus}`,
75 { 80 {
76 - [`${prefixCls}-show-info`]: !this.hideInfo, 81 + [`${prefixCls}-show-info`]: !this.hideInfo
77 82
78 } 83 }
79 ]; 84 ];
@@ -94,16 +99,18 @@ @@ -94,16 +99,18 @@
94 return `${prefixCls}-bg`; 99 return `${prefixCls}-bg`;
95 } 100 }
96 }, 101 },
97 - compiled () { 102 + created () {
98 this.handleStatus(); 103 this.handleStatus();
99 }, 104 },
100 methods: { 105 methods: {
101 handleStatus (isDown) { 106 handleStatus (isDown) {
102 if (isDown) { 107 if (isDown) {
103 - this.status = 'normal'; 108 + this.currentStatus = 'normal';
  109 + this.$emit('on-status-change', 'normal');
104 } else { 110 } else {
105 if (parseInt(this.percent, 10) == 100) { 111 if (parseInt(this.percent, 10) == 100) {
106 - this.status = 'success'; 112 + this.currentStatus = 'success';
  113 + this.$emit('on-status-change', 'success');
107 } 114 }
108 } 115 }
109 } 116 }
@@ -115,6 +122,9 @@ @@ -115,6 +122,9 @@
115 } else { 122 } else {
116 this.handleStatus(); 123 this.handleStatus();
117 } 124 }
  125 + },
  126 + status (val) {
  127 + this.currentStatus = val;
118 } 128 }
119 } 129 }
120 }; 130 };
src/components/upload/upload-list.vue
  Show/Hide comments   View file @5d08ddf
@@ -11,13 +11,14 @@ @@ -11,13 +11,14 @@
11 type="ios-close-empty" 11 type="ios-close-empty"
12 :class="[prefixCls + '-list-remove']" 12 :class="[prefixCls + '-list-remove']"
13 v-show="file.status === 'finished'" 13 v-show="file.status === 'finished'"
14 - @click="handleRemove(file)"></Icon>  
15 - <Progress  
16 - v-if="file.showProgress"  
17 - :stroke-width="2"  
18 - :percent="parsePercentage(file.percentage)"  
19 - :status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'"  
20 - transition="fade"></Progress> 14 + @click.native="handleRemove(file)"></Icon>
  15 + <transition name="fade">
  16 + <Progress
  17 + v-if="file.showProgress"
  18 + :stroke-width="2"
  19 + :percent="parsePercentage(file.percentage)"
  20 + :status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'"></Progress>
  21 + </transition>
21 </li> 22 </li>
22 </ul> 23 </ul>
23 </template> 24 </template>
@@ -41,7 +42,6 @@ @@ -41,7 +42,6 @@
41 prefixCls: prefixCls 42 prefixCls: prefixCls
42 }; 43 };
43 }, 44 },
44 - computed: {},  
45 methods: { 45 methods: {
46 fileCls (file) { 46 fileCls (file) {
47 return [ 47 return [
src/components/upload/upload.vue
  Show/Hide comments   View file @5d08ddf
@@ -7,9 +7,9 @@ @@ -7,9 +7,9 @@
7 @dragover.prevent="dragOver = true" 7 @dragover.prevent="dragOver = true"
8 @dragleave.prevent="dragOver = false"> 8 @dragleave.prevent="dragOver = false">
9 <input 9 <input
10 - v-el:input  
11 - :class="[prefixCls + '-input']" 10 + ref="input"
12 type="file" 11 type="file"
  12 + :class="[prefixCls + '-input']"
13 @change="handleChange" 13 @change="handleChange"
14 :multiple="multiple" 14 :multiple="multiple"
15 :accept="accept"> 15 :accept="accept">
@@ -154,7 +154,7 @@ @@ -154,7 +154,7 @@
154 }, 154 },
155 methods: { 155 methods: {
156 handleClick () { 156 handleClick () {
157 - this.$els.input.click(); 157 + this.$refs.input.click();
158 }, 158 },
159 handleChange (e) { 159 handleChange (e) {
160 const files = e.target.files; 160 const files = e.target.files;
@@ -163,7 +163,7 @@ @@ -163,7 +163,7 @@
163 return; 163 return;
164 } 164 }
165 this.uploadFiles(files); 165 this.uploadFiles(files);
166 - this.$els.input.value = null; 166 + this.$refs.input.value = null;
167 }, 167 },
168 onDrop (e) { 168 onDrop (e) {
169 this.dragOver = false; 169 this.dragOver = false;
@@ -276,7 +276,8 @@ @@ -276,7 +276,8 @@
276 _file.status = 'finished'; 276 _file.status = 'finished';
277 _file.response = res; 277 _file.response = res;
278 278
279 - this.$dispatch('on-form-change', _file); 279 + // todo 事件
  280 +// this.$dispatch('on-form-change', _file);
280 this.onSuccess(res, _file, this.fileList); 281 this.onSuccess(res, _file, this.fileList);
281 282
282 setTimeout(() => { 283 setTimeout(() => {
@@ -26,7 +26,7 @@ import InputNumber from &#39;./components/input-number&#39;; @@ -26,7 +26,7 @@ import InputNumber from &#39;./components/input-number&#39;;
26 // import Notice from './components/notice'; 26 // import Notice from './components/notice';
27 // import Page from './components/page'; 27 // import Page from './components/page';
28 // import Poptip from './components/poptip'; 28 // import Poptip from './components/poptip';
29 -// import Progress from './components/progress'; 29 +import Progress from './components/progress';
30 import Radio from './components/radio'; 30 import Radio from './components/radio';
31 // import Rate from './components/rate'; 31 // import Rate from './components/rate';
32 // import Slider from './components/slider'; 32 // import Slider from './components/slider';
@@ -41,7 +41,7 @@ import Timeline from &#39;./components/timeline&#39;; @@ -41,7 +41,7 @@ import Timeline from &#39;./components/timeline&#39;;
41 // import Tooltip from './components/tooltip'; 41 // import Tooltip from './components/tooltip';
42 // import Transfer from './components/transfer'; 42 // import Transfer from './components/transfer';
43 // import Tree from './components/tree'; 43 // import Tree from './components/tree';
44 -// import Upload from './components/upload'; 44 +import Upload from './components/upload';
45 import { Row, Col } from './components/grid'; 45 import { Row, Col } from './components/grid';
46 // import { Select, Option, OptionGroup } from './components/select'; 46 // import { Select, Option, OptionGroup } from './components/select';
47 import locale from './locale'; 47 import locale from './locale';
@@ -88,7 +88,7 @@ const iview = { @@ -88,7 +88,7 @@ const iview = {
88 // Page, 88 // Page,
89 // Panel: Collapse.Panel, 89 // Panel: Collapse.Panel,
90 // Poptip, 90 // Poptip,
91 - // Progress, 91 + Progress,
92 Radio, 92 Radio,
93 RadioGroup: Radio.Group, 93 RadioGroup: Radio.Group,
94 // Rate, 94 // Rate,
@@ -109,7 +109,7 @@ const iview = { @@ -109,7 +109,7 @@ const iview = {
109 // Tooltip, 109 // Tooltip,
110 // Transfer, 110 // Transfer,
111 // Tree, 111 // Tree,
112 - // Upload 112 + Upload
113 }; 113 };
114 114
115 const install = function (Vue, opts = {}) { 115 const install = function (Vue, opts = {}) {
@@ -26,6 +26,8 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } @@ -26,6 +26,8 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
26 <li><router-link to="/badge">Badge</router-link></li> 26 <li><router-link to="/badge">Badge</router-link></li>
27 <li><router-link to="/tag">Tag</router-link></li> 27 <li><router-link to="/tag">Tag</router-link></li>
28 <li><router-link to="/input-number">InputNumber</router-link></li> 28 <li><router-link to="/input-number">InputNumber</router-link></li>
  29 + <li><router-link to="/progress">Progress</router-link></li>
  30 + <li><router-link to="/upload">Upload</router-link></li>
29 </ul> 31 </ul>
30 </nav> 32 </nav>
31 <router-view></router-view> 33 <router-view></router-view>
@@ -68,6 +68,14 @@ const router = new VueRouter({ @@ -68,6 +68,14 @@ const router = new VueRouter({
68 { 68 {
69 path: '/input-number', 69 path: '/input-number',
70 component: require('./routers/input-number.vue') 70 component: require('./routers/input-number.vue')
  71 + },
  72 + {
  73 + path: '/upload',
  74 + component: require('./routers/upload.vue')
  75 + },
  76 + {
  77 + path: '/progress',
  78 + component: require('./routers/progress.vue')
71 } 79 }
72 ] 80 ]
73 }); 81 });
test/routers/progress.vue 0 → 100644
  Show/Hide comments   View file @5d08ddf
  1 +<template>
  2 + <div>
  3 + <Progress :percent="percent"></Progress>
  4 + <Button-group size="large">
  5 + <Button icon="ios-plus-empty" @click.native="add"></Button>
  6 + <Button icon="ios-minus-empty" @click.native="minus"></Button>
  7 + </Button-group>
  8 + <Progress :percent="25" :stroke-width="5"></Progress>
  9 + <Progress :percent="100">
  10 + <Icon type="checkmark-circled"></Icon>
  11 + <span>成功</span>
  12 + </Progress>
  13 + </div>
  14 +</template>
  15 +<script>
  16 + export default {
  17 + data () {
  18 + return {
  19 + percent: 0
  20 + }
  21 + },
  22 + methods: {
  23 + add () {
  24 + if (this.percent >= 100) {
  25 + return false;
  26 + }
  27 + this.percent += 10;
  28 + },
  29 + minus () {
  30 + if (this.percent <= 0) {
  31 + return false;
  32 + }
  33 + this.percent -= 10;
  34 + }
  35 + }
  36 + }
  37 +</script>
test/routers/upload.vue
  Show/Hide comments   View file @5d08ddf
1 <template> 1 <template>
2 - <div class="demo-upload-list" v-for="item in uploadList">  
3 - <template v-if="item.status === 'finished'">  
4 - <img :src="item.url">  
5 - <div class="demo-upload-list-cover">  
6 - <Icon type="ios-eye-outline" @click="handleView(item.name)"></Icon>  
7 - <Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon> 2 + <div>
  3 + <div class="demo-upload-list" v-for="item in uploadList">
  4 + <template v-if="item.status === 'finished'">
  5 + <img :src="item.url">
  6 + <div class="demo-upload-list-cover">
  7 + <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
  8 + <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
  9 + </div>
  10 + </template>
  11 + <template v-else>
  12 + <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
  13 + </template>
  14 + </div>
  15 + <Upload
  16 + ref="upload"
  17 + :show-upload-list="false"
  18 + :default-file-list="defaultList"
  19 + :on-success="handleSuccess"
  20 + :format="['jpg','jpeg','png']"
  21 + :max-size="2048"
  22 + :on-format-error="handleFormatError"
  23 + :on-exceeded-size="handleMaxSize"
  24 + @on-progress="handleProgress"
  25 + :before-upload="handleBeforeUpload"
  26 + multiple
  27 + type="drag"
  28 + action="//jsonplaceholder.typicode.com/posts/"
  29 + style="display: inline-block;width:58px;">
  30 + <div style="width: 58px;height:58px;line-height: 58px;">
  31 + <Icon type="camera" size="20"></Icon>
8 </div> 32 </div>
9 - </template>  
10 - <template v-else>  
11 - <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>  
12 - </template> 33 + </Upload>
  34 + {{ visible }}
13 </div> 35 </div>
14 - <Upload  
15 - v-ref:upload  
16 - :show-upload-list="false"  
17 - :default-file-list="defaultList"  
18 - :on-success="handleSuccess"  
19 - :format="['jpg','jpeg','png']"  
20 - :max-size="2048"  
21 - :on-format-error="handleFormatError"  
22 - :on-exceeded-size="handleMaxSize"  
23 - :before-upload="handleBeforeUpload"  
24 - multiple  
25 - type="drag"  
26 - action="//jsonplaceholder.typicode.com/posts/"  
27 - style="display: inline-block;width:58px;">  
28 - <div style="width: 58px;height:58px;line-height: 58px;">  
29 - <Icon type="camera" size="20"></Icon>  
30 - </div>  
31 - </Upload>  
32 - <Modal title="查看图片" :visible.sync="visible">  
33 - <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">  
34 - </Modal>  
35 </template> 36 </template>
36 <script> 37 <script>
37 export default { 38 export default {
@@ -48,13 +49,21 @@ @@ -48,13 +49,21 @@
48 } 49 }
49 ], 50 ],
50 imgName: '', 51 imgName: '',
51 - visible: false 52 + visible: false,
  53 + uploadList: []
52 } 54 }
53 }, 55 },
54 computed: { 56 computed: {
55 - uploadList () {  
56 - return this.$refs.upload ? this.$refs.upload.fileList : [];  
57 - } 57 +// uploadList () {
  58 +// return this.$refs.upload ? this.$refs.upload.fileList : [];
  59 +// }
  60 + },
  61 + watch: {
  62 +
  63 + },
  64 + mounted () {
  65 + this.uploadList = this.$refs.upload.fileList;
  66 +// console.log(this.$refs.upload.fileList)
58 }, 67 },
59 methods: { 68 methods: {
60 handleView (name) { 69 handleView (name) {
@@ -91,6 +100,9 @@ @@ -91,6 +100,9 @@
91 }); 100 });
92 } 101 }
93 return check; 102 return check;
  103 + },
  104 + handleProgress (s) {
  105 + console.log(s)
94 } 106 }
95 } 107 }
96 } 108 }