From 726f98027a2805426c04de1182db9f2e74e846a4 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 14 May 2022 10:58:57 +0800
Subject: [PATCH] feat(Uploader): add preview-delete slot (#10606)

---
 .../form/test/__snapshots__/demo.spec.ts.snap |  2 +-
 packages/vant/src/uploader/README.md          |  3 +-
 packages/vant/src/uploader/README.zh-CN.md    |  7 +-
 packages/vant/src/uploader/Uploader.tsx       |  2 +-
 .../vant/src/uploader/UploaderPreviewItem.tsx |  9 +-
 packages/vant/src/uploader/index.less         | 11 ++-
 .../test/__snapshots__/demo.spec.ts.snap      | 16 ++--
 .../test/__snapshots__/index.spec.ts.snap     | 89 +++++--------------
 packages/vant/src/uploader/test/index.spec.ts | 21 ++++-
 9 files changed, 70 insertions(+), 90 deletions(-)

diff --git a/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
index f567d4dec..55eb028b3 100644
--- a/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
@@ -460,7 +460,7 @@ exports[`should render demo and match snapshot 1`] = `
                       </div>
                     </div>
                     <div role="button"
-                         class="van-uploader__preview-delete"
+                         class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
                          tabindex="0"
                          aria-label="Delete"
                     >
diff --git a/packages/vant/src/uploader/README.md b/packages/vant/src/uploader/README.md
index 320037bc1..6e80a57bb 100644
--- a/packages/vant/src/uploader/README.md
+++ b/packages/vant/src/uploader/README.md
@@ -344,7 +344,8 @@ export default {
 
 | Name | Description | SlotProps |
 | --- | --- | --- |
-| default | Custom icon | - |
+| default | Custom upload area | - |
+| preview-delete `v.3.5.0` | Custom delete icon | `item: FileListItem` |
 | preview-cover | Custom content that covers the image preview | `item: FileListItem` |
 
 ### Parameters of before-read、after-read、before-delete
diff --git a/packages/vant/src/uploader/README.zh-CN.md b/packages/vant/src/uploader/README.zh-CN.md
index 1a2a4a8a8..e5369db66 100644
--- a/packages/vant/src/uploader/README.zh-CN.md
+++ b/packages/vant/src/uploader/README.zh-CN.md
@@ -363,9 +363,10 @@ export default {
 
 ### Slots
 
-| 名称          | 说明                           | 参数                 |
-| ------------- | ------------------------------ | -------------------- |
-| default       | 自定义上传区域                 | -                    |
+| 名称 | 说明 | 参数 |
+| --- | --- | --- |
+| default | 自定义上传区域 | - |
+| preview-delete `v3.5.0` | 自定义删除按钮 | - |
 | preview-cover | 自定义覆盖在预览区域上方的内容 | _item: FileListItem_ |
 
 ### 回调参数
diff --git a/packages/vant/src/uploader/Uploader.tsx b/packages/vant/src/uploader/Uploader.tsx
index 00effea10..7929cdefb 100644
--- a/packages/vant/src/uploader/Uploader.tsx
+++ b/packages/vant/src/uploader/Uploader.tsx
@@ -280,7 +280,7 @@ export default defineComponent({
 
       return (
         <UploaderPreviewItem
-          v-slots={{ 'preview-cover': slots['preview-cover'] }}
+          v-slots={pick(slots, ['preview-cover', 'preview-delete'])}
           item={item}
           index={index}
           onClick={() => emit('click-preview', item, getDetail(index))}
diff --git a/packages/vant/src/uploader/UploaderPreviewItem.tsx b/packages/vant/src/uploader/UploaderPreviewItem.tsx
index 53f194415..cfb5d0e68 100644
--- a/packages/vant/src/uploader/UploaderPreviewItem.tsx
+++ b/packages/vant/src/uploader/UploaderPreviewItem.tsx
@@ -73,15 +73,20 @@ export default defineComponent({
 
     const renderDeleteIcon = () => {
       if (props.deletable && props.item.status !== 'uploading') {
+        const slot = slots['preview-delete'];
         return (
           <div
             role="button"
-            class={bem('preview-delete')}
+            class={bem('preview-delete', { shadow: !slot })}
             tabindex={0}
             aria-label={t('delete')}
             onClick={onDelete}
           >
-            <Icon name="cross" class={bem('preview-delete-icon')} />
+            {slot ? (
+              slot()
+            ) : (
+              <Icon name="cross" class={bem('preview-delete-icon')} />
+            )}
           </div>
         );
       }
diff --git a/packages/vant/src/uploader/index.less b/packages/vant/src/uploader/index.less
index 27a243b76..e11c51b0c 100644
--- a/packages/vant/src/uploader/index.less
+++ b/packages/vant/src/uploader/index.less
@@ -108,10 +108,13 @@
       position: absolute;
       top: 0;
       right: 0;
-      width: var(--van-uploader-delete-icon-size);
-      height: var(--van-uploader-delete-icon-size);
-      background: var(--van-uploader-delete-background-color);
-      border-radius: 0 0 0 12px;
+
+      &--shadow {
+        width: var(--van-uploader-delete-icon-size);
+        height: var(--van-uploader-delete-icon-size);
+        background: var(--van-uploader-delete-background-color);
+        border-radius: 0 0 0 12px;
+      }
 
       &-icon {
         position: absolute;
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 bf2c95631..752e76dfa 100644
--- a/packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap
@@ -30,7 +30,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </div>
         <div role="button"
-             class="van-uploader__preview-delete"
+             class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
              tabindex="0"
              aria-label="Delete"
         >
@@ -50,7 +50,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </div>
         <div role="button"
-             class="van-uploader__preview-delete"
+             class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
              tabindex="0"
              aria-label="Delete"
         >
@@ -126,7 +126,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </div>
         <div role="button"
-             class="van-uploader__preview-delete"
+             class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
              tabindex="0"
              aria-label="Delete"
         >
@@ -160,7 +160,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </div>
         <div role="button"
-             class="van-uploader__preview-delete"
+             class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
              tabindex="0"
              aria-label="Delete"
         >
@@ -195,7 +195,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </div>
         <div role="button"
-             class="van-uploader__preview-delete"
+             class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
              tabindex="0"
              aria-label="Delete"
         >
@@ -258,7 +258,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </div>
         <div role="button"
-             class="van-uploader__preview-delete"
+             class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
              tabindex="0"
              aria-label="Delete"
         >
@@ -294,7 +294,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </div>
         <div role="button"
-             class="van-uploader__preview-delete"
+             class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
              tabindex="0"
              aria-label="Delete"
         >
@@ -359,7 +359,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </div>
         <div role="button"
-             class="van-uploader__preview-delete"
+             class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
              tabindex="0"
              aria-label="Delete"
         >
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 2899b3524..1585809bd 100644
--- a/packages/vant/src/uploader/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/uploader/test/__snapshots__/index.spec.ts.snap
@@ -17,7 +17,7 @@ exports[`delete preview image 1`] = `
         </div>
       </div>
       <div role="button"
-           class="van-uploader__preview-delete"
+           class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
            tabindex="0"
            aria-label="Delete"
       >
@@ -66,7 +66,7 @@ exports[`disable preview image 2`] = `
         </div>
       </div>
       <div role="button"
-           class="van-uploader__preview-delete"
+           class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
            tabindex="0"
            aria-label="Delete"
       >
@@ -116,68 +116,7 @@ exports[`image-fit prop 1`] = `
         </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">
-      </i>
-      <input type="file"
-             class="van-uploader__input"
-             accept="image/*"
-      >
-    </div>
-  </div>
-</div>
-`;
-
-exports[`preview-cover slot 1`] = `
-<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/cat.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 class="van-uploader__preview-cover">
-          Custom Preview Cover
-        </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__preview">
-      <div class="van-image van-uploader__preview-image">
-        <img src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.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 class="van-uploader__preview-cover">
-          Custom Preview Cover
-        </div>
-      </div>
-      <div role="button"
-           class="van-uploader__preview-delete"
+           class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
            tabindex="0"
            aria-label="Delete"
       >
@@ -212,7 +151,7 @@ exports[`render preview image 1`] = `
         </div>
       </div>
       <div role="button"
-           class="van-uploader__preview-delete"
+           class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
            tabindex="0"
            aria-label="Delete"
       >
@@ -229,7 +168,7 @@ exports[`render preview image 1`] = `
         </div>
       </div>
       <div role="button"
-           class="van-uploader__preview-delete"
+           class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
            tabindex="0"
            aria-label="Delete"
       >
@@ -246,7 +185,7 @@ exports[`render preview image 1`] = `
         </div>
       </div>
       <div role="button"
-           class="van-uploader__preview-delete"
+           class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
            tabindex="0"
            aria-label="Delete"
       >
@@ -277,6 +216,22 @@ exports[`should not render upload input when using readonly prop 1`] = `
 </div>
 `;
 
+exports[`should render preview-cover slot correctly 1`] = `
+<div class="van-uploader__preview-cover">
+  Custom Preview Cover
+</div>
+`;
+
+exports[`should render preview-delete slot correctly 1`] = `
+<div role="button"
+     class="van-uploader__preview-delete"
+     tabindex="0"
+     aria-label="Delete"
+>
+  Custom Preview Delete
+</div>
+`;
+
 exports[`upload-icon prop 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">
diff --git a/packages/vant/src/uploader/test/index.spec.ts b/packages/vant/src/uploader/test/index.spec.ts
index fc2583270..6d32d5056 100644
--- a/packages/vant/src/uploader/test/index.spec.ts
+++ b/packages/vant/src/uploader/test/index.spec.ts
@@ -627,17 +627,32 @@ test('multiFile upload filter max-size file', async () => {
   expect(wrapper.emitted<[File]>('oversize')![0]).toBeTruthy();
 });
 
-test('preview-cover slot', async () => {
+test('should render preview-cover slot correctly', async () => {
   const wrapper = mount(Uploader, {
     props: {
-      modelValue: [{ url: IMAGE }, { url: IMAGE }],
+      modelValue: [{ url: IMAGE }],
     },
     slots: {
       'preview-cover': 'Custom Preview Cover',
     },
   });
 
-  expect(wrapper.html()).toMatchSnapshot();
+  expect(wrapper.find('.van-uploader__preview-cover').html()).toMatchSnapshot();
+});
+
+test('should render preview-delete slot correctly', async () => {
+  const wrapper = mount(Uploader, {
+    props: {
+      modelValue: [{ url: IMAGE }],
+    },
+    slots: {
+      'preview-delete': 'Custom Preview Delete',
+    },
+  });
+
+  expect(
+    wrapper.find('.van-uploader__preview-delete').html()
+  ).toMatchSnapshot();
 });
 
 test('should not render upload input when using readonly prop', async () => {