support Progress & Upload

support Progress & Upload

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>
-            <Progress
-                v-if="file.showProgress"
-                :stroke-width="2"
-                :percent="parsePercentage(file.percentage)"
-                :status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'"
-                transition="fade"></Progress>
+                @click.native="handleRemove(file)"></Icon>
+            <transition name="fade">
+                <Progress
+                    v-if="file.showProgress"
+                    :stroke-width="2"
+                    :percent="parsePercentage(file.percentage)"
+                    :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
-                :class="[prefixCls + '-input']"
+                ref="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 = {}) {