add disabled feature

examples/docs/en-US/upload.md

@@ -365,6 +365,7 @@ file-list | default uploaded files, i.e: [{name: 'food.jpeg', url: 'https://fuss
 list-type | type of fileList | string | text/picture/picture-card | text |
 auto-upload | whether to auto upload file | boolean | — | true |
 http-request | override default xhr behavior, allowing you to implement your own upload-file's request | function | — | — |
+disabled | whether to disable upload | boolean | — | false |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/zh-CN/upload.md

@@ -414,6 +414,7 @@
 | auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true |
 | file-list | 上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | [] |
 | http-request | 覆盖默认的上传行为，可以自定义上传的实现 | function | — | — |
+| disabled | 是否禁用 | boolean | — | false |
 
 ### Methods
 | 方法名      | 说明          | 参数 |

packages/upload/src/iframe-upload.vue

@@ -32,7 +32,8 @@ export default {
       default: function() {}
     },
     drag: Boolean,
-    listType: String
+    listType: String,
+    disabled: Boolean
   },
 
   data() {
@@ -40,7 +41,7 @@ export default {
       mouseover: false,
       domain: '',
       file: null,
-      disabled: false
+      submitting: false
     };
   },
 
@@ -49,7 +50,9 @@ export default {
       return str.indexOf('image') !== -1;
     },
     handleClick() {
-      this.$refs.input.click();
+      if (!this.disabled) {
+        this.$refs.input.click();
+      }
     },
     handleChange(ev) {
       const file = ev.target.value;
@@ -58,8 +61,8 @@ export default {
       }
     },
     uploadFiles(file) {
-      if (this.disabled) return;
-      this.disabled = true;
+      if (this.submitting) return;
+      this.submitting = true;
       this.file = file;
       this.onStart(file);
 
@@ -103,7 +106,7 @@ export default {
       } else if (response.result === 'failed') {
         self.onError(response, self.file);
       }
-      self.disabled = false;
+      self.submitting = false;
       self.file = null;
     }, false);
   },
@@ -113,7 +116,8 @@ export default {
       drag,
       uploadFiles,
       listType,
-      frameName
+      frameName,
+      disabled
     } = this;
     const oClass = { 'el-upload': true };
     oClass[`el-upload--${listType}`] = true;
@@ -146,7 +150,7 @@ export default {
         </form>
         {
           drag
-          ? <upload-dragger on-file={uploadFiles}>{this.$slots.default}</upload-dragger>
+          ? <upload-dragger on-file={uploadFiles} disabled={disabled}>{this.$slots.default}</upload-dragger>
           : this.$slots.default
         }
       </div>

packages/upload/src/index.vue

@@ -86,7 +86,8 @@ export default {
       type: String,
       default: 'text'   // text,picture,picture-card
     },
-    httpRequest: Function
+    httpRequest: Function,
+    disabled: Boolean
   },
 
   data() {
@@ -227,6 +228,7 @@ export default {
         fileList: this.uploadFiles,
         autoUpload: this.autoUpload,
         listType: this.listType,
+        disabled: this.disabled,
         'on-start': this.handleStart,
         'on-progress': this.handleProgress,
         'on-success': this.handleSuccess,

packages/upload/src/upload-dragger.vue

@@ -5,7 +5,7 @@
       'is-dragover': dragover
     }"
     @drop.prevent="onDrop"
-    @dragover.prevent="dragover = true"
+    @dragover.prevent="onDragover"
     @dragleave.prevent="dragover = false"
   >
     <slot></slot>
@@ -14,16 +14,25 @@
 <script>
   export default {
     name: 'ElUploadDrag',
-
+    props: {
+      disabled: Boolean
+    },
     data() {
       return {
         dragover: false
       };
     },
     methods: {
+      onDragover() {
+        if (!this.disabled) {
+          this.dragover = true;
+        }
+      },
       onDrop(e) {
-        this.dragover = false;
-        this.$emit('file', e.dataTransfer.files);
+        if (!this.disabled) {
+          this.dragover = false;
+          this.$emit('file', e.dataTransfer.files);
+        }
       }
     }
   };

packages/upload/src/upload.vue

@@ -41,7 +41,8 @@ export default {
     httpRequest: {
       type: Function,
       default: ajax
-    }
+    },
+    disabled: Boolean
   },
 
   data() {
@@ -117,7 +118,9 @@ export default {
       }
     },
     handleClick() {
-      this.$refs.input.click();
+      if (!this.disabled) {
+        this.$refs.input.click();
+      }
     }
   },
 
@@ -130,7 +133,8 @@ export default {
       multiple,
       accept,
       listType,
-      uploadFiles
+      uploadFiles,
+      disabled
     } = this;
     const data = {
       class: {
@@ -145,7 +149,7 @@ export default {
       <div {...data}>
         {
           drag
-          ? <upload-dragger on-file={uploadFiles}>{this.$slots.default}</upload-dragger>
+          ? <upload-dragger disabled={disabled} on-file={uploadFiles}>{this.$slots.default}</upload-dragger>
           : this.$slots.default
         }
         <input class="el-upload__input" type="file" ref="input" name={name} on-change={handleChange} multiple={multiple} accept={accept}></input>