Browse Source

add api migrating

baiyaaaaa 8 years ago
parent
commit
691c6709ef

+ 1 - 1
examples/docs/en-US/upload.md

@@ -258,7 +258,7 @@ on-progress | hook function when some progress occurs | function(event, file, fi
 on-change | hook function when file status change | function(file, fileList) | — | — |
 before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` or a `Promise` is returned, uploading will be aborted | function(file) | — | —
 thumbnail-mode | whether thumbnail is displayed | boolean | — | false
-default-file-list | default uploaded files, i.e: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | []
+file-list | default uploaded files, i.e: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | []
 list-type | type of fileList | string | text/picture/picture-card | text |
 auto-upload | whether to auto upload file | boolean | — | true |
 

+ 1 - 1
examples/docs/zh-CN/upload.md

@@ -307,7 +307,7 @@
 | before-upload | 可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
 | list-type | 文件列表的类型 | string | text/picture/picture-card | text |
 | auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true |
-| fileList | 上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | [] |
+| file-list | 上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | [] |
 
 ### Methods
 | 方法名      | 说明          | 参数 |

+ 1 - 1
packages/theme-default/src/upload.css

@@ -88,7 +88,7 @@
       border-color: var(--color-primary);
     }
 
-    @when dragOver {
+    @when dragover {
       background-color: rgba(32, 159, 255, .06);
       border: 2px dashed var(--color-primary);
     }

+ 13 - 2
packages/upload/src/index.vue

@@ -3,12 +3,15 @@ import UploadList from './upload-list';
 import Upload from './upload';
 import IframeUpload from './iframe-upload';
 import ElProgress from 'element-ui/packages/progress';
+import Migrating from 'element-ui/src/mixins/migrating';
 
 function noop() {}
 
 export default {
   name: 'ElUpload',
 
+  mixins: [Migrating],
+
   components: {
     ElProgress,
     UploadList,
@@ -36,7 +39,6 @@ export default {
     drag: Boolean,
     dragger: Boolean,
     withCredentials: Boolean,
-    thumbnailMode: Boolean,
     showFileList: {
       type: Boolean,
       default: true
@@ -180,6 +182,15 @@ export default {
         .forEach(file => {
           this.$refs['upload-inner'].upload(file.raw, file);
         });
+    },
+    getMigratingConfig() {
+      return {
+        props: {
+          'default-file-list': 'default-file-list is renamed to file-list.',
+          'show-upload-list': 'show-file-list is renamed to show-file-list.',
+          'thumbnail-mode': 'thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan'
+        }
+      };
     }
   },
 
@@ -208,7 +219,7 @@ export default {
         headers: this.headers,
         name: this.name,
         data: this.data,
-        accept: this.thumbnailMode ? 'image/gif, image/png, image/jpeg, image/bmp, image/webp' : this.accept,
+        accept: this.accept,
         fileList: this.uploadFiles,
         autoUpload: this.autoUpload,
         listType: this.listType,

+ 5 - 5
packages/upload/src/upload-dragger.vue

@@ -2,11 +2,11 @@
   <div
     class="el-upload-dragger"
     :class="{
-      'is-dragOver': dragOver
+      'is-dragover': dragover
     }"
     @drop.prevent="onDrop"
-    @dragover.prevent="dragOver = true"
-    @dragleave.prevent="dragOver = false"
+    @dragover.prevent="dragover = true"
+    @dragleave.prevent="dragover = false"
   >
     <slot></slot>
   </div>
@@ -17,12 +17,12 @@
 
     data() {
       return {
-        dragOver: false
+        dragover: false
       };
     },
     methods: {
       onDrop(e) {
-        this.dragOver = false;
+        this.dragover = false;
         this.$emit('file', e.dataTransfer.files);
       }
     }