[new feature] Uploader: add preview-size prop

docs/markdown/changelog.zh-CN.md

@@ -23,6 +23,7 @@
 
 - 新增`preview`属性
 - 新增`max-count`属性
+- 新增`preview-size`属性
 
 
 ### [v2.0.0-beta.3](https://github.com/youzan/vant/tree/v2.0.0-beta.3)

packages/uploader/en-US.md

@@ -53,6 +53,7 @@ export default {
 | name | Input name | `String` | - |
 | accept | Accepted file type | `String` | `image/*` |
 | preview | Whether to show image preview | `Boolean` | `false` |
+| preview-size | Size of preview image | `String | Number` | `80px` |
 | multiple | Whether to enable multiple selection pictures | `Boolean` | `false` |
 | disabled | Whether to disabled the upload | `Boolean` | `false` |
 | capture | Capture，can be set to `camera` | `String` | - |

packages/uploader/index.js

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { use, suffixPx } from '../utils';
 import Icon from '../icon';
 import Image from '../image';
 
@@ -11,8 +11,9 @@ export default sfc({
     preview: Boolean,
     disabled: Boolean,
     uploadText: String,
-    beforeRead: Function,
     afterRead: Function,
+    beforeRead: Function,
+    previewSize: [Number, String],
     accept: {
       type: String,
       default: 'image/*'
@@ -135,7 +136,13 @@ export default sfc({
     renderPreview() {
       if (this.preview) {
         return this.uploadedFiles.map(file => (
-          <Image fit="cover" class={bem('preview')} src={file.content} />
+          <Image
+            fit="cover"
+            class={bem('preview')}
+            src={file.content}
+            width={this.previewSize}
+            height={this.previewSize}
+          />
         ));
       }
     },
@@ -168,8 +175,17 @@ export default sfc({
         );
       }
 
+      let style;
+      if (this.previewSize) {
+        const size = suffixPx(this.previewSize);
+        style = {
+          width: size,
+          height: size
+        };
+      }
+
       return (
-        <div class={bem('upload')}>
+        <div class={bem('upload')} style={style}>
           <Icon name="plus" class={bem('upload-icon')} />
           {this.uploadText && <span class={bem('upload-text')}>{this.uploadText}</span>}
           {Input}

packages/uploader/test/__snapshots__/index.spec.js.snap

@@ -11,6 +11,19 @@ exports[`max-count prop 1`] = `
 </div>
 `;
 
+exports[`preview-size prop 1`] = `
+<div class="van-uploader">
+  <div class="van-uploader__wrapper">
+    <div class="van-image van-uploader__preview" style="width: 30px; height: 30px;"><img src="test" class="van-image__img" style="object-fit: cover;">
+      <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+          <!----></i></div>
+    </div>
+    <div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+        <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
+  </div>
+</div>
+`;
+
 exports[`render preview image 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">

packages/uploader/test/index.spec.js

@@ -150,3 +150,17 @@ it('max-count prop', async () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+it('preview-size prop', async () => {
+  const wrapper = mount(Uploader, {
+    propsData: {
+      preview: true,
+      previewSize: 30
+    }
+  });
+
+  wrapper.vm.onChange(file);
+  await later();
+
+  expect(wrapper).toMatchSnapshot();
+});

packages/uploader/zh-CN.md

@@ -59,6 +59,7 @@ export default {
 | name | 标识符，可以在回调函数的第二项参数中获取 | `String` | - | 1.6.13 |
 | accept | 接受的文件类型 | `String` | `image/*` | - |
 | preview | 是否在上传完成后展示预览图 | `Boolean` | `false` | 2.0.0 |
+| preview-size | 预览图和上传区域的尺寸，单位为`px` | `String | Number` | `80px` | 2.0.0 |
 | multiple | 是否开启图片多选，部分安卓机型不支持 | `Boolean` | `false` | 2.0.0 |
 | disabled | 是否禁用图片上传 | `Boolean` | `false` | - |
 | capture | 图片选取模式，可选值为`camera`(直接调起摄像头) | `String` | - | 2.0.0 |