diff --git a/packages/vant/src/uploader/README.md b/packages/vant/src/uploader/README.md index 1a51536a3..d6f9e9284 100644 --- a/packages/vant/src/uploader/README.md +++ b/packages/vant/src/uploader/README.md @@ -200,6 +200,23 @@ export default { ``` +### Preview Size + +Using `preview-size` prop to custom the size of preview image. + +```html + + + + +``` + +You can set the width and height separately. + +```html + +``` + ### Before Read ```html @@ -263,7 +280,6 @@ import { Toast } from 'vant'; export default { setup() { const fileList = ref([ - { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg' }, { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/sand.jpeg', deletable: true, @@ -273,9 +289,7 @@ export default { }, { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg', - deletable: true, imageFit: 'contain', - previewSize: 120, }, ]); @@ -293,7 +307,7 @@ export default { | v-model | List of uploaded files | _FileListItem[]_ | - | | accept | Accepted [file type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) | _string_ | `image/*` | | name | Input name | _number \| string_ | - | -| preview-size | Size of preview image | _number \| string_ | `80px` | +| preview-size | Size of preview image | _number \| string \| Array_ | `80px` | | preview-image | Whether to show image preview | _boolean_ | `true` | | preview-full-image | Whether to show full screen image preview when image is clicked | _boolean_ | `true` | | preview-options | Options of full screen image preview，see [ImagePreview](#/en-US/image-preview) | _object_ | - | diff --git a/packages/vant/src/uploader/README.zh-CN.md b/packages/vant/src/uploader/README.zh-CN.md index 74e5f4cbd..1a2a4a8a8 100644 --- a/packages/vant/src/uploader/README.zh-CN.md +++ b/packages/vant/src/uploader/README.zh-CN.md @@ -217,6 +217,23 @@ export default { ``` +### 自定义预览大小 + +通过 `preview-size` 属性定义预览图和上传区域的大小。 + +```html + + + + +``` + +将 `preview-size` 设置为数组格式，可以分别设置宽高。数组第一项对应宽度，数组第二项对应高度。 + +```html + +``` + ### 上传前置处理 通过传入 `beforeRead` 函数可以在上传前进行校验和处理，返回 `true` 表示校验通过，返回 `false` 表示校验失败。支持返回 `Promise` 对 file 对象进行自定义处理，例如压缩图片。 @@ -284,19 +301,16 @@ import { Toast } from 'vant'; export default { setup() { const fileList = ref([ - { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg' }, { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/sand.jpeg', deletable: true, beforeDelete: () => { - Toast('自定义单个预览图片的事件和样式'); + Toast('删除前置处理'); }, }, { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg', - deletable: true, imageFit: 'contain', - previewSize: 120, }, ]); @@ -314,7 +328,7 @@ export default { | v-model | 已上传的文件列表 | _FileListItem[]_ | - | | accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | _string_ | `image/*` | | name | 标识符，可以在回调函数的第二项参数中获取 | _number \| string_ | - | -| preview-size | 预览图和上传区域的尺寸，默认单位为 `px` | _number \| string_ | `80px` | +| preview-size | 预览图和上传区域的尺寸，默认单位为 `px` | _number \| string \| Array_ | `80px` | | preview-image | 是否在上传完成后展示预览图 | _boolean_ | `true` | | preview-full-image | 是否在点击预览图后展示全屏图片预览 | _boolean_ | `true` | | preview-options | 全屏图片预览的配置项，可选值见 [ImagePreview](#/zh-CN/image-preview) | _object_ | - | diff --git a/packages/vant/src/uploader/Uploader.tsx b/packages/vant/src/uploader/Uploader.tsx index 4dbab14e4..aae632acd 100644 --- a/packages/vant/src/uploader/Uploader.tsx +++ b/packages/vant/src/uploader/Uploader.tsx @@ -13,7 +13,6 @@ import { extend, isPromise, truthProp, - numericProp, Interceptor, getSizeStyle, makeArrayProp, @@ -70,7 +69,9 @@ const uploaderProps = { modelValue: makeArrayProp(), beforeRead: Function as PropType, beforeDelete: Function as PropType, - previewSize: numericProp, + previewSize: [Number, String, Array] as PropType< + number | string | Array + >, previewImage: truthProp, previewOptions: Object as PropType, previewFullImage: truthProp, diff --git a/packages/vant/src/uploader/UploaderPreviewItem.tsx b/packages/vant/src/uploader/UploaderPreviewItem.tsx index 15061d112..f80cac801 100644 --- a/packages/vant/src/uploader/UploaderPreviewItem.tsx +++ b/packages/vant/src/uploader/UploaderPreviewItem.tsx @@ -28,7 +28,9 @@ export default defineComponent({ imageFit: String as PropType, lazyLoad: Boolean, deletable: Boolean, - previewSize: numericProp, + previewSize: [Number, String, Array] as PropType< + number | string | Array + >, beforeDelete: Function as PropType, }, @@ -96,18 +98,18 @@ export default defineComponent({ }; const renderPreview = () => { - const { item } = props; + const { item, lazyLoad, imageFit, previewSize } = props; if (isImageFile(item)) { return ( ); diff --git a/packages/vant/src/uploader/demo/index.vue b/packages/vant/src/uploader/demo/index.vue index 52d5b5981..222703461 100644 --- a/packages/vant/src/uploader/demo/index.vue +++ b/packages/vant/src/uploader/demo/index.vue @@ -21,9 +21,10 @@ const t = useTranslate({ overSizeTip: '文件大小不能超过 500kb', invalidType: '请上传 jpg 格式图片', customUpload: '自定义上传样式', + previewSize: '自定义预览大小', previewCover: '自定义预览样式', - customPreviewImage: '自定义单个图片预览', deleteMessage: '删除前置处理', + customPreviewImage: '自定义单个图片预览', }, 'en-US': { status: 'Upload Status', @@ -39,9 +40,10 @@ const t = useTranslate({ overSizeTip: 'File size cannot exceed 500kb', invalidType: 'Please upload an image in jpg format', customUpload: 'Custom Upload Area', + previewSize: 'Preview Size', previewCover: 'Preview Cover', - customPreviewImage: 'Custom single prevew image', deleteMessage: 'Before Delete', + customPreviewImage: 'Custom single preview image', }, }); @@ -61,7 +63,6 @@ const fileList4 = ref([ ]); const fileList5 = ref([ - { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg' }, { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/sand.jpeg', deletable: true, @@ -71,9 +72,7 @@ const fileList5 = ref([ }, { url: 'https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg', - deletable: true, imageFit: 'contain', - previewSize: 120, }, ]); @@ -99,6 +98,12 @@ const previewCoverFiles = ref([ }, ]); +const previewSizeFiles = ref([ + { + url: 'https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg', + }, +]); + const beforeRead = (file: File | File[]) => { if (Array.isArray(file)) { return true; @@ -185,6 +190,10 @@ const onOversize = (file: UploaderFileListItem, detail: unknown) => { + + + + diff --git a/packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap index 50b97af36..535ade9b8 100644 --- a/packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap @@ -274,6 +274,44 @@ exports[`should render demo and match snapshot 1`] = ` +
+
+
+
+
+ +
+ + +
+
+
+ + +
+
+
+ + + +
+
+
+
@@ -306,18 +344,6 @@ exports[`should render demo and match snapshot 1`] = `
-
-
- -
- - -
-
-
-
+
-
- - -
diff --git a/packages/vant/src/uploader/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/uploader/test/__snapshots__/index.spec.ts.snap index 959196010..2899b3524 100644 --- a/packages/vant/src/uploader/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/uploader/test/__snapshots__/index.spec.ts.snap @@ -197,42 +197,6 @@ exports[`preview-cover slot 1`] = `
`; -exports[`preview-size prop 1`] = ` -
-
-
-
- - -
- test.jpg -
-
-
- - -
-
-
- - - -
-
-
-`; - exports[`render preview image 1`] = `
diff --git a/packages/vant/src/uploader/test/index.spec.ts b/packages/vant/src/uploader/test/index.spec.ts index 267ee7d8f..94b4b4419 100644 --- a/packages/vant/src/uploader/test/index.spec.ts +++ b/packages/vant/src/uploader/test/index.spec.ts @@ -360,16 +360,39 @@ test('max-count prop', async () => { ).toHaveLength(1); }); -test('preview-size prop', async () => { +test('should allow to custom size by preview-size prop', async () => { const wrapper = mount(Uploader, { props: { - modelValue: [], + modelValue: [{ file: mockFile }], previewSize: 30, }, }); - await wrapper.setProps({ modelValue: [{ file: mockFile }] }); - expect(wrapper.html()).toMatchSnapshot(); + console.log(wrapper.html()); + const image = wrapper.find('.van-uploader__file'); + expect(image.style.width).toEqual('30px'); + expect(image.style.height).toEqual('30px'); + + const upload = wrapper.find('.van-uploader__upload'); + expect(upload.style.width).toEqual('30px'); + expect(upload.style.height).toEqual('30px'); +}); + +test('should allow to set width and height separately by preview-size prop', async () => { + const wrapper = mount(Uploader, { + props: { + modelValue: [{ file: mockFile }], + previewSize: [20, 10], + }, + }); + + const image = wrapper.find('.van-uploader__file'); + expect(image.style.width).toEqual('20px'); + expect(image.style.height).toEqual('10px'); + + const upload = wrapper.find('.van-uploader__upload'); + expect(upload.style.width).toEqual('20px'); + expect(upload.style.height).toEqual('10px'); }); test('deletable prop', async () => { diff --git a/packages/vant/src/utils/format.ts b/packages/vant/src/utils/format.ts index 6a2628b2c..8648ff569 100644 --- a/packages/vant/src/utils/format.ts +++ b/packages/vant/src/utils/format.ts @@ -11,9 +11,15 @@ export function addUnit(value?: string | number): string | undefined { } export function getSizeStyle( - originSize?: string | number + originSize?: string | number | Array ): CSSProperties | undefined { if (isDef(originSize)) { + if (Array.isArray(originSize)) { + return { + width: addUnit(originSize[0]), + height: addUnit(originSize[1]), + }; + } const size = addUnit(originSize); return { width: size,