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`] = `
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 (
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 (
-
+ {slot ? (
+ slot()
+ ) : (
+
+ )}
);
}
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`] = `
@@ -50,7 +50,7 @@ exports[`should render demo and match snapshot 1`] = `
@@ -126,7 +126,7 @@ exports[`should render demo and match snapshot 1`] = `
@@ -160,7 +160,7 @@ exports[`should render demo and match snapshot 1`] = `
@@ -195,7 +195,7 @@ exports[`should render demo and match snapshot 1`] = `
@@ -258,7 +258,7 @@ exports[`should render demo and match snapshot 1`] = `
@@ -294,7 +294,7 @@ exports[`should render demo and match snapshot 1`] = `
@@ -359,7 +359,7 @@ 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 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`] = `
@@ -66,7 +66,7 @@ exports[`disable preview image 2`] = `
@@ -116,68 +116,7 @@ exports[`image-fit prop 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`preview-cover slot 1`] = `
-
-
-
-
-
-
-
-
-
-
- Custom Preview Cover
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Custom Preview Cover
-
-
-
@@ -212,7 +151,7 @@ exports[`render preview image 1`] = `
@@ -229,7 +168,7 @@ exports[`render preview image 1`] = `
@@ -246,7 +185,7 @@ exports[`render preview image 1`] = `
@@ -277,6 +216,22 @@ exports[`should not render upload input when using readonly prop 1`] = `
`;
+exports[`should render preview-cover slot correctly 1`] = `
+
+ Custom Preview Cover
+
+`;
+
+exports[`should render preview-delete slot correctly 1`] = `
+
+ Custom Preview Delete
+
+`;
+
exports[`upload-icon prop 1`] = `
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 () => {