support Progress & Upload

support Progress & Upload

CHANGE.md

@@ -13,4 +13,8 @@ value 改为了 label，使用 v-model，废弃 checked
 ### Badge
 class 改为了 className
 ### InputNumber
-使用 v-model
+使用 v-model
+### Progress (名称有警告)
+新增 on-status-change 事件
+### Upload 
+父级不能 computed Upload 的 fileList 了

README.md

@@ -33,14 +33,14 @@
 - [ ] Transfer
 - [x] InputNumber
 - [ ] Rate
-- [ ] Upload
+- [x] Upload
 - [ ] Form
 - [x] Alert
 - [ ] Card
 - [ ] Message
 - [ ] Notice
 - [ ] Modal
-- [ ] Progress
+- [x] Progress
 - [x] Badge
 - [ ] Collapse
 - [x] Timeline

src/components/progress/progress.vue

@@ -45,13 +45,18 @@
                 default: 10
             }
         },
+        data () {
+            return {
+                currentStatus: this.status
+            }
+        },
         computed: {
             isStatus () {
-                return this.status == 'wrong' || this.status == 'success';
+                return this.currentStatus == 'wrong' || this.currentStatus == 'success';
             },
             statusIcon () {
                 let type = '';
-                switch (this.status) {
+                switch (this.currentStatus) {
                     case 'wrong':
                         type = 'ios-close';
                         break;
@@ -71,9 +76,9 @@
             wrapClasses () {
                 return [
                     `${prefixCls}`,
-                    `${prefixCls}-${this.status}`,
+                    `${prefixCls}-${this.currentStatus}`,
                     {
-                        [`${prefixCls}-show-info`]: !this.hideInfo,
+                        [`${prefixCls}-show-info`]: !this.hideInfo
 
                     }
                 ];
@@ -94,16 +99,18 @@
                 return `${prefixCls}-bg`;
             }
         },
-        compiled () {
+        created () {
             this.handleStatus();
         },
         methods: {
             handleStatus (isDown) {
                 if (isDown) {
-                    this.status = 'normal';
+                    this.currentStatus = 'normal';
+                    this.$emit('on-status-change', 'normal');
                 } else {
                     if (parseInt(this.percent, 10) == 100) {
-                        this.status = 'success';
+                        this.currentStatus = 'success';
+                        this.$emit('on-status-change', 'success');
                     }
                 }
             }
@@ -115,6 +122,9 @@
                 } else {
                     this.handleStatus();
                 }
+            },
+            status (val) {
+                this.currentStatus = val;
             }
         }
     };

src/components/upload/upload-list.vue

@@ -11,13 +11,14 @@
                 type="ios-close-empty"
                 :class="[prefixCls + '-list-remove']"
                 v-show="file.status === 'finished'"
-                @click="handleRemove(file)"></Icon>
+                @click.native="handleRemove(file)"></Icon>
-            <Progress
+            <transition name="fade">
-                v-if="file.showProgress"
+                <Progress
-                :stroke-width="2"
+                    v-if="file.showProgress"
-                :percent="parsePercentage(file.percentage)"
+                    :stroke-width="2"
-                :status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'"
+                    :percent="parsePercentage(file.percentage)"
-                transition="fade"></Progress>
+                    :status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'"></Progress>
+            </transition>
         </li>
     </ul>
 </template>
@@ -41,7 +42,6 @@
                 prefixCls: prefixCls
             };
         },
-        computed: {},
         methods: {
             fileCls (file) {
                 return [

src/components/upload/upload.vue

@@ -7,9 +7,9 @@
             @dragover.prevent="dragOver = true"
             @dragleave.prevent="dragOver = false">
             <input
-                v-el:input
+                ref="input"
-                :class="[prefixCls + '-input']"
                 type="file"
+                :class="[prefixCls + '-input']"
                 @change="handleChange"
                 :multiple="multiple"
                 :accept="accept">
@@ -154,7 +154,7 @@
         },
         methods: {
             handleClick () {
-                this.$els.input.click();
+                this.$refs.input.click();
             },
             handleChange (e) {
                 const files = e.target.files;
@@ -163,7 +163,7 @@
                     return;
                 }
                 this.uploadFiles(files);
-                this.$els.input.value = null;
+                this.$refs.input.value = null;
             },
             onDrop (e) {
                 this.dragOver = false;
@@ -276,7 +276,8 @@
                     _file.status = 'finished';
                     _file.response = res;
 
-                    this.$dispatch('on-form-change', _file);
+                    // todo 事件
+//                    this.$dispatch('on-form-change', _file);
                     this.onSuccess(res, _file, this.fileList);
 
                     setTimeout(() => {

src/index.js

@@ -26,7 +26,7 @@ import InputNumber from './components/input-number';
 // import Notice from './components/notice';
 // import Page from './components/page';
 // import Poptip from './components/poptip';
-// import Progress from './components/progress';
+import Progress from './components/progress';
 import Radio from './components/radio';
 // import Rate from './components/rate';
 // import Slider from './components/slider';
@@ -41,7 +41,7 @@ import Timeline from './components/timeline';
 // import Tooltip from './components/tooltip';
 // import Transfer from './components/transfer';
 // import Tree from './components/tree';
-// import Upload from './components/upload';
+import Upload from './components/upload';
 import { Row, Col } from './components/grid';
 // import { Select, Option, OptionGroup } from './components/select';
 import locale from './locale';
@@ -88,7 +88,7 @@ const iview = {
     // Page,
     // Panel: Collapse.Panel,
     // Poptip,
-    // Progress,
+    Progress,
     Radio,
     RadioGroup: Radio.Group,
     // Rate,
@@ -109,7 +109,7 @@ const iview = {
     // Tooltip,
     // Transfer,
     // Tree,
-    // Upload
+    Upload
 };
 
 const install = function (Vue, opts = {}) {

test/app.vue

@@ -26,6 +26,8 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/badge">Badge</router-link></li>
                 <li><router-link to="/tag">Tag</router-link></li>
                 <li><router-link to="/input-number">InputNumber</router-link></li>
+                <li><router-link to="/progress">Progress</router-link></li>
+                <li><router-link to="/upload">Upload</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -68,6 +68,14 @@ const router = new VueRouter({
         {
             path: '/input-number',
             component: require('./routers/input-number.vue')
+        },
+        {
+            path: '/upload',
+            component: require('./routers/upload.vue')
+        },
+        {
+            path: '/progress',
+            component: require('./routers/progress.vue')
         }
     ]
 });

test/routers/progress.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <Progress :percent="percent"></Progress>
+        <Button-group size="large">
+            <Button icon="ios-plus-empty" @click.native="add"></Button>
+            <Button icon="ios-minus-empty" @click.native="minus"></Button>
+        </Button-group>
+        <Progress :percent="25" :stroke-width="5"></Progress>
+        <Progress :percent="100">
+            <Icon type="checkmark-circled"></Icon>
+            <span>成功</span>
+        </Progress>
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                percent: 0
+            }
+        },
+        methods: {
+            add () {
+                if (this.percent >= 100) {
+                    return false;
+                }
+                this.percent += 10;
+            },
+            minus () {
+                if (this.percent <= 0) {
+                    return false;
+                }
+                this.percent -= 10;
+            }
+        }
+    }
+</script>

test/routers/upload.vue

@@ -1,37 +1,38 @@
 <template>
-    <div class="demo-upload-list" v-for="item in uploadList">
+    <div>
-        <template v-if="item.status === 'finished'">
+        <div class="demo-upload-list" v-for="item in uploadList">
-            <img :src="item.url">
+            <template v-if="item.status === 'finished'">
-            <div class="demo-upload-list-cover">
+                <img :src="item.url">
-                <Icon type="ios-eye-outline" @click="handleView(item.name)"></Icon>
+                <div class="demo-upload-list-cover">
-                <Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
+                    <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
-            </div>
+                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
-        </template>
+                </div>
-        <template v-else>
+            </template>
-            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
+            <template v-else>
-        </template>
+                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
-    </div>
+            </template>
-    <Upload
-            v-ref:upload
-            :show-upload-list="false"
-            :default-file-list="defaultList"
-            :on-success="handleSuccess"
-            :format="['jpg','jpeg','png']"
-            :max-size="2048"
-            :on-format-error="handleFormatError"
-            :on-exceeded-size="handleMaxSize"
-            :before-upload="handleBeforeUpload"
-            multiple
-            type="drag"
-            action="//jsonplaceholder.typicode.com/posts/"
-            style="display: inline-block;width:58px;">
-        <div style="width: 58px;height:58px;line-height: 58px;">
-            <Icon type="camera" size="20"></Icon>
         </div>
-    </Upload>
+        <Upload
-    <Modal title="查看图片" :visible.sync="visible">
+                ref="upload"
-        <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
+                :show-upload-list="false"
-    </Modal>
+                :default-file-list="defaultList"
+                :on-success="handleSuccess"
+                :format="['jpg','jpeg','png']"
+                :max-size="2048"
+                :on-format-error="handleFormatError"
+                :on-exceeded-size="handleMaxSize"
+                @on-progress="handleProgress"
+                :before-upload="handleBeforeUpload"
+                multiple
+                type="drag"
+                action="//jsonplaceholder.typicode.com/posts/"
+                style="display: inline-block;width:58px;">
+            <div style="width: 58px;height:58px;line-height: 58px;">
+                <Icon type="camera" size="20"></Icon>
+            </div>
+        </Upload>
+        {{ visible }}
+    </div>
 </template>
 <script>
     export default {
@@ -48,13 +49,21 @@
                     }
                 ],
                 imgName: '',
-                visible: false
+                visible: false,
+                uploadList: []
             }
         },
         computed: {
-            uploadList () {
+//            uploadList () {
-                return this.$refs.upload ? this.$refs.upload.fileList : [];
+//                return this.$refs.upload ? this.$refs.upload.fileList : [];
-            }
+//            }
+        },
+        watch: {
+
+        },
+        mounted () {
+            this.uploadList = this.$refs.upload.fileList;
+//            console.log(this.$refs.upload.fileList)
         },
         methods: {
             handleView (name) {
@@ -91,6 +100,9 @@
                     });
                 }
                 return check;
+            },
+            handleProgress (s) {
+                console.log(s)
             }
         }
     }