other / 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
CHANGE.md
  Show/Hide comments   View file @5d08ddf
... ... @@ -13,4 +13,8 @@ value 改为了 label，使用 v-model，废弃 checked
13 13 ### Badge
14 14 class 改为了 className
15 15 ### InputNumber
16   -使用 v-model
17 16 \ No newline at end of file
  17 +使用 v-model
  18 +### Progress (名称有警告)
  19 +新增 on-status-change 事件
  20 +### Upload
  21 +父级不能 computed Upload 的 fileList 了
18 22 \ No newline at end of file
... ...
README.md
  Show/Hide comments   View file @5d08ddf
... ... @@ -33,14 +33,14 @@
33 33 - [ ] Transfer
34 34 - [x] InputNumber
35 35 - [ ] Rate
36   -- [ ] Upload
  36 +- [x] Upload
37 37 - [ ] Form
38 38 - [x] Alert
39 39 - [ ] Card
40 40 - [ ] Message
41 41 - [ ] Notice
42 42 - [ ] Modal
43   -- [ ] Progress
  43 +- [x] Progress
44 44 - [x] Badge
45 45 - [ ] Collapse
46 46 - [x] Timeline
... ...
src/components/progress/progress.vue
  Show/Hide comments   View file @5d08ddf
... ... @@ -45,13 +45,18 @@
45 45 default: 10
46 46 }
47 47 },
  48 + data () {
  49 + return {
  50 + currentStatus: this.status
  51 + }
  52 + },
48 53 computed: {
49 54 isStatus () {
50   - return this.status == 'wrong' || this.status == 'success';
  55 + return this.currentStatus == 'wrong' || this.currentStatus == 'success';
51 56 },
52 57 statusIcon () {
53 58 let type = '';
54   - switch (this.status) {
  59 + switch (this.currentStatus) {
55 60 case 'wrong':
56 61 type = 'ios-close';
57 62 break;
... ... @@ -71,9 +76,9 @@
71 76 wrapClasses () {
72 77 return [
73 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 99 return `${prefixCls}-bg`;
95 100 }
96 101 },
97   - compiled () {
  102 + created () {
98 103 this.handleStatus();
99 104 },
100 105 methods: {
101 106 handleStatus (isDown) {
102 107 if (isDown) {
103   - this.status = 'normal';
  108 + this.currentStatus = 'normal';
  109 + this.$emit('on-status-change', 'normal');
104 110 } else {
105 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 122 } else {
116 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 11 type="ios-close-empty"
12 12 :class="[prefixCls + '-list-remove']"
13 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 22 </li>
22 23 </ul>
23 24 </template>
... ... @@ -41,7 +42,6 @@
41 42 prefixCls: prefixCls
42 43 };
43 44 },
44   - computed: {},
45 45 methods: {
46 46 fileCls (file) {
47 47 return [
... ...
src/components/upload/upload.vue
  Show/Hide comments   View file @5d08ddf
... ... @@ -7,9 +7,9 @@
7 7 @dragover.prevent="dragOver = true"
8 8 @dragleave.prevent="dragOver = false">
9 9 <input
10   - v-el:input
11   - :class="[prefixCls + '-input']"
  10 + ref="input"
12 11 type="file"
  12 + :class="[prefixCls + '-input']"
13 13 @change="handleChange"
14 14 :multiple="multiple"
15 15 :accept="accept">
... ... @@ -154,7 +154,7 @@
154 154 },
155 155 methods: {
156 156 handleClick () {
157   - this.$els.input.click();
  157 + this.$refs.input.click();
158 158 },
159 159 handleChange (e) {
160 160 const files = e.target.files;
... ... @@ -163,7 +163,7 @@
163 163 return;
164 164 }
165 165 this.uploadFiles(files);
166   - this.$els.input.value = null;
  166 + this.$refs.input.value = null;
167 167 },
168 168 onDrop (e) {
169 169 this.dragOver = false;
... ... @@ -276,7 +276,8 @@
276 276 _file.status = 'finished';
277 277 _file.response = res;
278 278  
279   - this.$dispatch('on-form-change', _file);
  279 + // todo 事件
  280 +// this.$dispatch('on-form-change', _file);
280 281 this.onSuccess(res, _file, this.fileList);
281 282  
282 283 setTimeout(() => {
... ...
src/index.js
  Show/Hide comments   View file @5d08ddf
... ... @@ -26,7 +26,7 @@ import InputNumber from &#39;./components/input-number&#39;;
26 26 // import Notice from './components/notice';
27 27 // import Page from './components/page';
28 28 // import Poptip from './components/poptip';
29   -// import Progress from './components/progress';
  29 +import Progress from './components/progress';
30 30 import Radio from './components/radio';
31 31 // import Rate from './components/rate';
32 32 // import Slider from './components/slider';
... ... @@ -41,7 +41,7 @@ import Timeline from &#39;./components/timeline&#39;;
41 41 // import Tooltip from './components/tooltip';
42 42 // import Transfer from './components/transfer';
43 43 // import Tree from './components/tree';
44   -// import Upload from './components/upload';
  44 +import Upload from './components/upload';
45 45 import { Row, Col } from './components/grid';
46 46 // import { Select, Option, OptionGroup } from './components/select';
47 47 import locale from './locale';
... ... @@ -88,7 +88,7 @@ const iview = {
88 88 // Page,
89 89 // Panel: Collapse.Panel,
90 90 // Poptip,
91   - // Progress,
  91 + Progress,
92 92 Radio,
93 93 RadioGroup: Radio.Group,
94 94 // Rate,
... ... @@ -109,7 +109,7 @@ const iview = {
109 109 // Tooltip,
110 110 // Transfer,
111 111 // Tree,
112   - // Upload
  112 + Upload
113 113 };
114 114  
115 115 const install = function (Vue, opts = {}) {
... ...
test/app.vue
  Show/Hide comments   View file @5d08ddf
... ... @@ -26,6 +26,8 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
26 26 <li><router-link to="/badge">Badge</router-link></li>
27 27 <li><router-link to="/tag">Tag</router-link></li>
28 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 31 </ul>
30 32 </nav>
31 33 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @5d08ddf
... ... @@ -68,6 +68,14 @@ const router = new VueRouter({
68 68 {
69 69 path: '/input-number',
70 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 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 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 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 36 </template>
36 37 <script>
37 38 export default {
... ... @@ -48,13 +49,21 @@
48 49 }
49 50 ],
50 51 imgName: '',
51   - visible: false
  52 + visible: false,
  53 + uploadList: []
52 54 }
53 55 },
54 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 68 methods: {
60 69 handleView (name) {
... ... @@ -91,6 +100,9 @@
91 100 });
92 101 }
93 102 return check;
  103 + },
  104 + handleProgress (s) {
  105 + console.log(s)
94 106 }
95 107 }
96 108 }
... ...