update

examples/docs/zh-CN/upload.md

@@ -6,6 +6,10 @@
   }
   .demo-box {
     margin-bottom: 24px;
+
+    .upload-demo {
+      width: 360px;
+    }
   }
 </style>
 <script>
@@ -59,6 +63,7 @@
 ::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
 ```html
 <el-upload
+  class="upload-demo"
   action="//jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
@@ -88,14 +93,17 @@
 
 ::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
 ```html
-<el-upload-dragger
+<el-upload
+  class="upload-demo"
+  dragger
   action="//jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
   :file-list="fileList">
-  <el-button size="small" type="primary">点击上传</el-button>
+  <i class="el-icon-upload"></i>
+  <div class="el-upload-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
   <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
-</el-upload-dragger>
+</el-upload>
 ```
 :::
 

packages/theme-default/src/upload.css

@@ -101,7 +101,7 @@
       display: none;
     }
   }
-  @b dragger {
+  @b upload-dragger {
     background-color: var(--color-dark-white);
     border: 1px solid var(--color-extra-light-silver);
     box-sizing: border-box;

packages/upload/src/index.vue

@@ -1,6 +1,7 @@
 <script>
 import UploadList from './upload-list';
 import Upload from './upload';
+import UploadDragger from './upload-dragger';
 import IframeUpload from './iframe-upload';
 import ElProgress from 'element-ui/packages/progress';
 
@@ -14,6 +15,7 @@ export default {
     ElProgress,
     UploadList,
     Upload,
+    UploadDragger,
     IframeUpload
   },
 
@@ -35,6 +37,7 @@ export default {
       default: 'file'
     },
     draggable: Boolean,
+    dragger: Boolean,
     withCredentials: Boolean,
     thumbnailMode: Boolean,
     showUploadList: {
@@ -236,27 +239,27 @@ export default {
       ref: 'upload-inner'
     };
 
-    var uploadComponent = (typeof FormData !== 'undefined' || this.$isServer)
-        ? <upload {...props}>{this.$slots.default}</upload>
-        : <iframeUpload {...props}>{this.$slots.default}</iframeUpload>;
+    // var uploadComponent = (typeof FormData !== 'undefined' || this.$isServer)
+    //     ? <upload {...props}>{this.$slots.default}</upload>
+    //     : <iframeUpload {...props}>{this.$slots.default}</iframeUpload>;
+
+    if (this.dragger) {
+      return (
+        <div>
+          <upload-dragger {...props}>{this.$slots.default}</upload-dragger>
+          {this.$slots.tip}
+          {uploadList}
+        </div>
+      );
+    }
 
     return (
-      <div class="el-upload">
+      <div>
         {uploadList}
-        {uploadComponent}
+        <upload {...props}>{this.$slots.default}</upload>
         {this.$slots.tip}
       </div>
     );
-
-    // if (this.type === 'drag') {
-    //   return (
-    //     <div class="el-upload">
-    //       {uploadComponent}
-    //       {this.$slots.tip}
-    //       {uploadList}
-    //     </div>
-    //   );
-    // }
   }
 };
 </script>

packages/upload/src/upload-dragger.vue

@@ -1,16 +1,38 @@
+<template>
+  <div
+    class="el-upload-dragger"
+    :class="{
+      'is-dragOver': dragOver,
+      'is-showCover': showCover
+    }"
+    @click="handleClick"
+    @drop.prevent="onDrop"
+    @dragover.prevent="dragOver = true"
+    @dragleave.prevent="dragOver = false"
+  >
+    <slot v-if="!showCover"></slot>
+    <cover :image="lastestFile" :on-preview="onPreview" :on-remove="onRemove" v-else></cover>
+    <input class="el-upload__input" type="file" ref="input" @change="handleChange" :multiple="multiple" :accept="accept">
+  </div>
+</template>
 <script>
-  import index from '.';
   import Upload from './upload';
   import IframeUpload from './iframe-upload';
-  import UploadList from './upload-list';
+  import Cover from './cover';
 
   export default {
     name: 'ElUploadDragger',
-    extends: index,
+
+    extends: Upload,
+
     components: {
-      UploadList,
-      Upload,
-      IframeUpload
+      IframeUpload,
+      Cover
+    },
+    data() {
+      return {
+        dragOver: false
+      };
     },
     props: {
       draggable: {
@@ -18,57 +40,48 @@
         default: true
       }
     },
-    render(h) {
-      var uploadList;
-
-      if (this.showUploadList && !this.thumbnailMode && this.uploadFiles.length) {
-        uploadList = (
-          <UploadList
-            files={this.uploadFiles}
-            on-remove={this.handleRemove}
-            on-preview={this.handlePreview}>
-          </UploadList>
-        );
-      }
-
-      var props = {
-        props: {
-          type: this.type,
-          draggable: this.draggable,
-          action: this.action,
-          multiple: this.multiple,
-          'before-upload': this.beforeUpload,
-          'with-credentials': this.withCredentials,
-          headers: this.headers,
-          name: this.name,
-          data: this.data,
-          accept: this.thumbnailMode ? 'image/gif, image/png, image/jpeg, image/bmp, image/webp' : this.accept,
-          'on-start': this.handleStart,
-          'on-progress': this.handleProgress,
-          'on-success': this.handleSuccess,
-          'on-error': this.handleError,
-          'on-preview': this.handlePreview,
-          'on-remove': this.handleRemove
+    computed: {
+      lastestFile() {
+        var fileList = this.$parent.fileList;
+        return fileList[fileList.length - 1];
       },
-        ref: 'upload-inner'
-      };
-
-      var uploadComponent = (typeof FormData !== 'undefined' || this.$isServer)
-          ? <upload {...props}>{this.$slots.default}</upload>
-          : <iframeUpload {...props}>{this.$slots.default}</iframeUpload>;
-
-      return (
-        <div
-          class={{
-            'el-upload-dragger': true,
-            'is-dragOver': this.dragOver
-          }}
-        >
-          {uploadComponent}
-          {this.$slots.tip}
-          {uploadList}
-        </div>
-      );
+      showCover() {
+        var file = this.lastestFile;
+        return this.thumbnailMode && file && file.status !== 'fail';
+      },
+      thumbnailMode() {
+        return this.$parent.thumbnailMode;
       }
+    },
+    methods: {
+      onDrop(e) {
+        this.dragOver = false;
+        this.uploadFiles(e.dataTransfer.files);
+      }
+    }
+    // render(h) {
+    //   let {
+    //     dragover
+    //   } = this;
+
+    //   let content = this.showCover
+    //     ? <cover image={this.lastestFile} on-preview={this.onPreview} on-remove={this.onRemove}></cover>
+    //     : this.$slots.default
+    //   return (
+    //     <div
+    //       class={{
+    //         'el-upload-dragger': true,
+    //         'is-dragOver': this.dragOver,
+    //         'is-showCover': this.showCover
+    //       }}
+    //       @drop.prevent="onDrop"
+    //       @dragover.prevent="dragOver = true"
+    //       @dragleave.prevent="dragOver = false"
+    //     >
+    //       {content}
+    //       <input class="el-upload__input" type="file" ref="input" on-change={this.handleChange} multiple={this.multiple} accept={this.accept} />
+    //     </div>
+    //   );
+    // }
   };
 </script>

packages/upload/src/upload.vue

@@ -1,25 +1,15 @@
 <template>
-  <div class="el-upload__inner"
-    :class="{
-      'el-dragger': type === 'drag',
-      'is-dragOver': dragOver,
-      'is-showCover': showCover
-    }"
-    @click="handleClick"
-  >
-    <slot v-if="!showCover"></slot>
-    <cover :image="lastestFile" :on-preview="onPreview" :on-remove="onRemove" v-else></cover>
+  <div class="el-upload" @click="handleClick">
+    <slot></slot>
     <input class="el-upload__input" type="file" ref="input" @change="handleChange" :multiple="multiple" :accept="accept">
   </div>
 </template>
 
 <script>
 import ajax from './ajax';
-import Cover from './cover';
 
 export default {
   components: {
-    Cover
   },
   props: {
     type: String,
@@ -53,25 +43,10 @@ export default {
 
   data() {
     return {
-      dragOver: false,
       mouseover: false
     };
   },
 
-  computed: {
-    lastestFile() {
-      var fileList = this.$parent.fileList;
-      return fileList[fileList.length - 1];
-    },
-    showCover() {
-      var file = this.lastestFile;
-      return this.thumbnailMode && file && file.status !== 'fail';
-    },
-    thumbnailMode() {
-      return this.$parent.thumbnailMode;
-    }
-  },
-
   methods: {
     isImage(str) {
       return str.indexOf('image') !== -1;
@@ -146,10 +121,6 @@ export default {
         }
       });
     },
-    onDrop(e) {
-      this.dragOver = false;
-      this.uploadFiles(e.dataTransfer.files);
-    },
     handleClick() {
       this.$refs.input.click();
     }