From af4dea96edda54be7e2aa45eddd8e6dd1207f072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Tue, 4 Jun 2019 16:02:36 +0800
Subject: [PATCH] [Doc] Uploader: update demo

---
 packages/style/var.less          |  2 ++
 packages/uploader/demo/index.vue | 18 ------------------
 packages/uploader/en-US.md       |  6 +++---
 packages/uploader/index.js       | 12 ++++++------
 packages/uploader/index.less     |  4 ++--
 packages/uploader/zh-CN.md       |  6 +++---
 6 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/packages/style/var.less b/packages/style/var.less
index a2d4dc969..9e8b78e9d 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -579,3 +579,5 @@
 @uploader-icon-color: @gray-dark;
 @uploader-text-color: @gray-dark;
 @uploader-text-font-size: 12px;
+@uploader-upload-border-color: @gray-light;
+@uploader-upload-background-color: @white;
diff --git a/packages/uploader/demo/index.vue b/packages/uploader/demo/index.vue
index e72864a4e..249f37123 100644
--- a/packages/uploader/demo/index.vue
+++ b/packages/uploader/demo/index.vue
@@ -29,33 +29,15 @@
 export default {
   i18n: {
     'zh-CN': {
-      name: '标识名称',
       upload: '上传图片',
       maxCount: '上传数量限制',
       uploadStyle: '自定义上传样式'
     },
     'en-US': {
-      name: 'Name',
       upload: 'Upload Image',
       maxCount: 'Max Count',
       uploadStyle: 'Upload Style'
     }
-  },
-
-  methods: {
-    logContent(file) {
-      console.log(file);
-    },
-
-    beforeRead(index) {
-      return file => {
-        console.log(index, file);
-      };
-    },
-
-    toastName(file, detail) {
-      this.$toast(detail.name);
-    }
   }
 };
 </script>
diff --git a/packages/uploader/en-US.md b/packages/uploader/en-US.md
index 9b00b9a12..18d68c33f 100644
--- a/packages/uploader/en-US.md
+++ b/packages/uploader/en-US.md
@@ -13,13 +13,13 @@ Vue.use(Uploader);
 ### Basic Usage
 
 ```html
-<van-uploader preview :after-read="onRead" />
+<van-uploader preview :after-read="afterRead" />
 ```
 
 ```javascript
 export default {
   methods: {
-    onRead(file) {
+    afterRead(file) {
       console.log(file)
     }
   }
@@ -39,7 +39,7 @@ export default {
 ### Upload Style
 
 ```html
-<van-uploader :after-read="onRead">
+<van-uploader>
   <van-button icon="photo" type="primary">Upload Image</van-button>
 </van-uploader>
 ```
diff --git a/packages/uploader/index.js b/packages/uploader/index.js
index b757c9589..c7ccf55e7 100644
--- a/packages/uploader/index.js
+++ b/packages/uploader/index.js
@@ -33,7 +33,7 @@ export default sfc({
 
   data() {
     return {
-      previewImages: []
+      uploadedFiles: []
     };
   },
 
@@ -61,7 +61,7 @@ export default sfc({
       }
 
       if (Array.isArray(files)) {
-        const maxCount = this.maxCount - this.previewImages.length;
+        const maxCount = this.maxCount - this.uploadedFiles.length;
         files = files.slice(0, maxCount);
 
         Promise.all(files.map(this.readFile)).then(contents => {
@@ -122,7 +122,7 @@ export default sfc({
     },
 
     addPreviewImage(file) {
-      this.previewImages.push(file.content);
+      this.uploadedFiles.push(file);
     },
 
     resetInput() {
@@ -134,14 +134,14 @@ export default sfc({
 
     renderPreview() {
       if (this.preview) {
-        return this.previewImages.map(image => (
-          <Image fit="cover" class={bem('preview')} src={image} />
+        return this.uploadedFiles.map(file => (
+          <Image fit="cover" class={bem('preview')} src={file.content} />
         ));
       }
     },
 
     renderUpload() {
-      if (this.previewImages.length >= this.maxCount) {
+      if (this.uploadedFiles.length >= this.maxCount) {
         return;
       }
 
diff --git a/packages/uploader/index.less b/packages/uploader/index.less
index 4841f98b9..14140fc9f 100644
--- a/packages/uploader/index.less
+++ b/packages/uploader/index.less
@@ -34,8 +34,8 @@
     width: @uploader-size;
     height: @uploader-size;
     margin: 0 10px 10px 0;
-    background-color: @white;
-    border: 1px dashed @gray-light;
+    background-color: @uploader-upload-background-color;
+    border: 1px dashed @uploader-upload-border-color;
 
     &-icon {
       color: @uploader-icon-color;
diff --git a/packages/uploader/zh-CN.md b/packages/uploader/zh-CN.md
index faf916c99..fac566433 100644
--- a/packages/uploader/zh-CN.md
+++ b/packages/uploader/zh-CN.md
@@ -15,13 +15,13 @@ Vue.use(Uploader);
 图片上传完毕后会触发`after-read`传入的回调函数，获取到对应的`file`对象
 
 ```html
-<van-uploader preview :after-read="onRead" />
+<van-uploader preview :after-read="afterRead" />
 ```
 
 ```javascript
 export default {
   methods: {
-    onRead(file) {
+    afterRead(file) {
       console.log(file)
     }
   }
@@ -45,7 +45,7 @@ export default {
 通过插槽可以自定义上传区域的样式
 
 ```html
-<van-uploader :after-read="onRead">
+<van-uploader>
   <van-button icon="photo" type="primary">上传图片</van-button>
 </van-uploader>
 ```