feat(Uploader): support set the preview size separately (#10438)

2025-04-06 03:57:59 +08:00 · 2022-03-27 12:46:15 +08:00 · 2022-03-27 12:46:15 +08:00 · c89d407a41
commit c89d407a41
parent 0eae222b88
9 changed files with 135 additions and 86 deletions
--- a/packages/vant/src/uploader/README.md
+++ b/packages/vant/src/uploader/README.md
@ -200,6 +200,23 @@ export default {
 </style>
 ```

+### Preview Size
+
+Using `preview-size` prop to custom the size of preview image.
+
+```html
+<!-- The default unit is px -->
+<van-uploader v-model="fileList" preview-size="60" />
+<!-- Support other units, such as rem, vh, vw -->
+<van-uploader v-model="fileList" preview-size="5rem" />
+```
+
+You can set the width and height separately.
+
+```html
+<van-uploader v-model="fileList" :preview-size="[60, 40]" />
+```
+
 ### 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_ | - |
--- a/packages/vant/src/uploader/README.zh-CN.md
+++ b/packages/vant/src/uploader/README.zh-CN.md
@ -217,6 +217,23 @@ export default {
 </style>
 ```

+### 自定义预览大小
+
+通过 `preview-size` 属性定义预览图和上传区域的大小。
+
+```html
+<!-- 不指定单位，默认为 px -->
+<van-uploader v-model="fileList" preview-size="60" />
+<!-- 指定单位，支持 rem, vh, vw -->
+<van-uploader v-model="fileList" preview-size="5rem" />
+```
+
+将 `preview-size` 设置为数组格式，可以分别设置宽高。数组第一项对应宽度，数组第二项对应高度。
+
+```html
+<van-uploader v-model="fileList" :preview-size="[60, 40]" />
+```
+
 ### 上传前置处理

 通过传入 `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_ | - |
--- 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<UploaderFileListItem>(),
  beforeRead: Function as PropType<UploaderBeforeRead>,
  beforeDelete: Function as PropType<Interceptor>,
-  previewSize: numericProp,
+  previewSize: [Number, String, Array] as PropType<
+    number | string | Array<number | string>
+  >,
  previewImage: truthProp,
  previewOptions: Object as PropType<ImagePreviewOptions>,
  previewFullImage: truthProp,
--- 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<ImageFit>,
    lazyLoad: Boolean,
    deletable: Boolean,
-    previewSize: numericProp,
+    previewSize: [Number, String, Array] as PropType<
+      number | string | Array<number | string>
+    >,
    beforeDelete: Function as PropType<Interceptor>,
  },

@ -96,18 +98,18 @@ export default defineComponent({
    };

    const renderPreview = () => {
-      const { item } = props;
+      const { item, lazyLoad, imageFit, previewSize } = props;

      if (isImageFile(item)) {
        return (
          <Image
            v-slots={{ default: renderCover }}
-            fit={props.imageFit}
+            fit={imageFit}
            src={item.content || item.url}
            class={bem('preview-image')}
-            width={props.previewSize}
-            height={props.previewSize}
-            lazyLoad={props.lazyLoad}
+            width={Array.isArray(previewSize) ? previewSize[0] : previewSize}
+            height={Array.isArray(previewSize) ? previewSize[1] : previewSize}
+            lazyLoad={lazyLoad}
            onClick={onPreview}
          />
        );
--- 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<UploaderFileListItem[]>([
-  { 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<UploaderFileListItem[]>([
  },
  {
    url: 'https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg',
-    deletable: true,
    imageFit: 'contain',
-    previewSize: 120,
  },
 ]);

@ -99,6 +98,12 @@ const previewCoverFiles = ref<UploaderFileListItem[]>([
  },
 ]);

+const previewSizeFiles = ref<UploaderFileListItem[]>([
+  {
+    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) => {
    </van-uploader>
  </demo-block>

+  <demo-block :title="t('previewSize')">
+    <van-uploader v-model="previewSizeFiles" preview-size="60" />
+  </demo-block>
+
  <demo-block :title="t('beforeRead')">
    <van-uploader v-model="fileList3" :before-read="beforeRead" />
  </demo-block>
--- 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`] = `
    </div>
  </div>
 </div>
+<div>
+  <div class="van-uploader">
+    <div class="van-uploader__wrapper">
+      <div class="van-uploader__preview">
+        <div class="van-image van-uploader__preview-image"
+             style="width: 60px; height: 60px;"
+        >
+          <img src="https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg"
+               class="van-image__img"
+               style="object-fit: cover;"
+          >
+          <div class="van-image__loading">
+            <i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            </i>
+          </div>
+        </div>
+        <div role="button"
+             class="van-uploader__preview-delete"
+             tabindex="0"
+             aria-label="Delete"
+        >
+          <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
+          </i>
+        </div>
+      </div>
+      <div class="van-uploader__upload"
+           style="width: 60px; height: 60px;"
+      >
+        <i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
+        </i>
+        <input type="file"
+               class="van-uploader__input"
+               accept="image/*"
+        >
+      </div>
+    </div>
+  </div>
+</div>
 <div>
  <div class="van-uploader">
    <div class="van-uploader__wrapper">
@ -306,18 +344,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
  <div class="van-uploader">
    <div class="van-uploader__wrapper">
-      <div class="van-uploader__preview">
-        <div class="van-image van-uploader__preview-image">
-          <img src="https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg"
-               class="van-image__img"
-               style="object-fit: cover;"
-          >
-          <div class="van-image__loading">
-            <i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
-            </i>
-          </div>
-        </div>
-      </div>
      <div class="van-uploader__preview">
        <div class="van-image van-uploader__preview-image">
          <img src="https://cdn.jsdelivr.net/npm/@vant/assets/sand.jpeg"
@ -339,9 +365,7 @@ exports[`should render demo and match snapshot 1`] = `
        </div>
      </div>
      <div class="van-uploader__preview">
-        <div class="van-image van-uploader__preview-image"
-             style="width: 120px; height: 120px;"
-        >
+        <div class="van-image van-uploader__preview-image">
          <img src="https://cdn.jsdelivr.net/npm/@vant/assets/tree.jpeg"
               class="van-image__img"
               style="object-fit: contain;"
@ -351,14 +375,6 @@ exports[`should render demo and match snapshot 1`] = `
            </i>
          </div>
        </div>
-        <div role="button"
-             class="van-uploader__preview-delete"
-             tabindex="0"
-             aria-label="Delete"
-        >
-          <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
-          </i>
-        </div>
      </div>
      <div class="van-uploader__upload">
        <i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
--- 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`] = `
 </div>
 `;

-exports[`preview-size prop 1`] = `
-<div class="van-uploader">
-  <div class="van-uploader__wrapper">
-    <div class="van-uploader__preview">
-      <div class="van-uploader__file"
-           style="width: 30px; height: 30px;"
-      >
-        <i class="van-badge__wrapper van-icon van-icon-description van-uploader__file-icon">
-        </i>
-        <div class="van-uploader__file-name van-ellipsis">
-          test.jpg
-        </div>
-      </div>
-      <div role="button"
-           class="van-uploader__preview-delete"
-           tabindex="0"
-           aria-label="Delete"
-      >
-        <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
-        </i>
-      </div>
-    </div>
-    <div class="van-uploader__upload"
-         style="width: 30px; height: 30px;"
-    >
-      <i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
-      </i>
-      <input type="file"
-             class="van-uploader__input"
-             accept="image/*"
-      >
-    </div>
-  </div>
-</div>
-`;
-
 exports[`render preview image 1`] = `
 <div class="van-uploader">
  <div class="van-uploader__wrapper">
--- 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 () => {
--- 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<string | number>
 ): 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,