feat(uploader): add single uploader preview image style (#7731)

src/coupon-list/README.zh-CN.md

@@ -91,7 +91,7 @@ export default {
 | coupons       | 可用优惠券列表       | _Coupon[]_         | `[]`     |
 | editable      | 能否切换优惠券       | _boolean_          | `true`   |
 | border        | 是否显示内边框       | _boolean_          | `true`   |
-| currency      | 货币符号             | _string_           | `¥`      | - |
+| currency      | 货币符号             | _string_           | `¥`      |
 
 ### CouponList Props
 

src/uploader/README.md

@@ -223,6 +223,41 @@ Use `disabled` prop to disable uploader.
 <van-uploader disabled />
 ```
 
+### Customize Single Preview Image Style
+
+```html
+<van-uploader v-model="fileList" :deletable="false" />
+```
+
+```js
+import { ref } from 'vue';
+import { Toast } from 'vant';
+
+export default {
+  setup() {
+    const fileList = ref([
+      { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+      {
+        url: 'https://img.yzcdn.cn/vant/sand.jpg',
+        deletable: true,
+        beforeDelete: () => {
+          Toast('Customize the events and styles of a single preview image');
+        },
+      },
+      {
+        url: 'https://img.yzcdn.cn/vant/tree.jpg',
+        deletable: true,
+        imageFit: 'contain',
+        previewSize: 120,
+      },
+    ]);
+    return {
+      fileList:
+    };
+  }
+};
+```
+
 ## API
 
 ### Props

src/uploader/README.zh-CN.md

@@ -246,6 +246,43 @@ export default {
 <van-uploader disabled />
 ```
 
+### 自定义单个图片预览
+
+在 `v-model` 数组中设置单个预览图片属性，支持 `imageFit`,`deletable`,`previewSize`,`beforeDelete`
+
+```html
+<van-uploader v-model="fileList" :deletable="false" />
+```
+
+```js
+import { ref } from 'vue';
+import { Toast } from 'vant';
+
+export default {
+  setup() {
+    const fileList = ref([
+      { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+      {
+        url: 'https://img.yzcdn.cn/vant/sand.jpg',
+        deletable: true,
+        beforeDelete: () => {
+          Toast('自定义单个预览图片的事件和样式');
+        },
+      },
+      {
+        url: 'https://img.yzcdn.cn/vant/tree.jpg',
+        deletable: true,
+        imageFit: 'contain',
+        previewSize: 120,
+      },
+    ]);
+    return {
+      fileList:
+    };
+  }
+};
+```
+
 ## API
 
 ### Props

src/uploader/demo/index.vue

@@ -47,6 +47,10 @@
   <demo-block :title="t('disabled')">
     <van-uploader :after-read="afterRead" disabled />
   </demo-block>
+
+  <demo-block :title="t('customPreviewImage')">
+    <van-uploader v-model="fileList5" multiple accept="*" :deletable="false" />
+  </demo-block>
 </template>
 
 <script>
@@ -70,6 +74,8 @@ const i18n = {
     invalidType: '请上传 jpg 格式图片',
     customUpload: '自定义上传样式',
     previewCover: '自定义预览样式',
+    customPreviewImage: '自定义单个图片预览',
+    deleteMessage: '删除前置处理',
   },
   'en-US': {
     status: 'Upload Status',
@@ -86,6 +92,8 @@ const i18n = {
     invalidType: 'Please upload an image in jpg format',
     customUpload: 'Custom Upload Area',
     previewCover: 'Preview Cover',
+    customPreviewImage: 'Custom single prevew image',
+    deleteMessage: 'Before Delete',
   },
 };
 
@@ -100,6 +108,22 @@ export default {
       fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
       fileList3: [],
       fileList4: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
+      fileList5: [
+        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+        {
+          url: 'https://img.yzcdn.cn/vant/sand.jpg',
+          deletable: true,
+          beforeDelete: () => {
+            Toast(t('deleteMessage'));
+          },
+        },
+        {
+          url: 'https://img.yzcdn.cn/vant/tree.jpg',
+          deletable: true,
+          imageFit: 'contain',
+          previewSize: 120,
+        },
+      ],
       statusFileList: [
         {
           url: 'https://img.yzcdn.cn/vant/leaf.jpg',

src/uploader/index.js

@@ -235,30 +235,42 @@ export default createComponent({
       emit('delete', item, getDetail(index));
     };
 
-    const renderPreviewItem = (item, index) => (
+    const renderPreviewItem = (item, index) => {
-      <PreviewItem
+      const needPickData = [
-        v-slots={{ 'preview-cover': slots['preview-cover'] }}
+        'imageFit',
-        item={item}
+        'deletable',
-        index={index}
+        'previewSize',
-        onClick={() => {
+        'beforeDelete',
-          emit('click-preview', item, getDetail(index));
+      ];
-        }}
+
-        onDelete={() => {
+      const previewData = pick(props, needPickData);
-          deleteFile(item, index);
+      const previewProp = pick(item, needPickData);
-        }}
+
-        onPreview={() => {
+      Object.keys(previewProp).forEach((item) => {
-          previewImage(item);
+        if (previewProp[item] !== undefined) {
-        }}
+          previewData[item] = previewProp[item];
-        {...pick(props, [
+        }
-          'name',
+      });
-          'lazyLoad',
+
-          'imageFit',
+      return (
-          'deletable',
+        <PreviewItem
-          'previewSize',
+          v-slots={{ 'preview-cover': slots['preview-cover'] }}
-          'beforeDelete',
+          item={item}
-        ])}
+          index={index}
-      />
+          onClick={() => {
-    );
+            emit('click-preview', item, getDetail(index));
+          }}
+          onDelete={() => {
+            deleteFile(item, index);
+          }}
+          onPreview={() => {
+            previewImage(item);
+          }}
+          {...pick(props, ['name', 'lazyLoad'])}
+          {...previewData}
+        />
+      );
+    };
 
     const renderPreviewList = () => {
       if (props.previewImage) {

src/uploader/test/__snapshots__/demo.spec.js.snap

@@ -279,4 +279,65 @@ 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">
+          <img src="https://img.yzcdn.cn/vant/leaf.jpg"
+               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://img.yzcdn.cn/vant/sand.jpg"
+               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 class="van-uploader__preview-delete">
+          <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
+          </i>
+        </div>
+      </div>
+      <div class="van-uploader__preview">
+        <div class="van-image van-uploader__preview-image"
+             style="width: 120px; height: 120px;"
+        >
+          <img src="https://img.yzcdn.cn/vant/tree.jpg"
+               class="van-image__img"
+               style="object-fit: contain;"
+          >
+          <div class="van-image__loading">
+            <i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+            </i>
+          </div>
+        </div>
+        <div class="van-uploader__preview-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">
+        </i>
+        <input type="file"
+               class="van-uploader__input"
+               accept="*"
+               multiple
+        >
+      </div>
+    </div>
+  </div>
+</div>
 `;