diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md
index 10f2cb7a8..3d7985d67 100644
--- a/docs/markdown/changelog.zh-CN.md
+++ b/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)
diff --git a/packages/uploader/en-US.md b/packages/uploader/en-US.md
index 18d68c33f..5d72892ec 100644
--- a/packages/uploader/en-US.md
+++ b/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` | - |
diff --git a/packages/uploader/index.js b/packages/uploader/index.js
index c7ccf55e7..835004b0c 100644
--- a/packages/uploader/index.js
+++ b/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 => (
-
+
));
}
},
@@ -168,8 +175,17 @@ export default sfc({
);
}
+ let style;
+ if (this.previewSize) {
+ const size = suffixPx(this.previewSize);
+ style = {
+ width: size,
+ height: size
+ };
+ }
+
return (
-
+
{this.uploadText && {this.uploadText}}
{Input}
diff --git a/packages/uploader/test/__snapshots__/index.spec.js.snap b/packages/uploader/test/__snapshots__/index.spec.js.snap
index 83619fcf5..fcd8c8eff 100644
--- a/packages/uploader/test/__snapshots__/index.spec.js.snap
+++ b/packages/uploader/test/__snapshots__/index.spec.js.snap
@@ -11,6 +11,19 @@ exports[`max-count prop 1`] = `
`;
+exports[`preview-size prop 1`] = `
+
+
+

+
+
+
+
+
+
+
+`;
+
exports[`render preview image 1`] = `
diff --git a/packages/uploader/test/index.spec.js b/packages/uploader/test/index.spec.js
index 1e522be66..367085c88 100644
--- a/packages/uploader/test/index.spec.js
+++ b/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();
+});
diff --git a/packages/uploader/zh-CN.md b/packages/uploader/zh-CN.md
index fac566433..5a4a6fa3a 100644
--- a/packages/uploader/zh-CN.md
+++ b/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 |