feat(Uploader): add preview-delete slot (#10606)

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"
                     >

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

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_ |
 
 ### 回调参数

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))}

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>
         );
       }

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);
+      &--shadow {
-      background: var(--van-uploader-delete-background-color);
+        width: var(--van-uploader-delete-icon-size);
-      border-radius: 0 0 0 12px;
+        height: var(--van-uploader-delete-icon-size);
+        background: var(--van-uploader-delete-background-color);
+        border-radius: 0 0 0 12px;
+      }
 
       &-icon {
         position: absolute;

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"
         >

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"
+           class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
-           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"
            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">

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 () => {