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 |