From 1d8fa5266bb33c6db07d22383f5b9695e9ff05b1 Mon Sep 17 00:00:00 2001
From: chouchouji <70570907+chouchouji@users.noreply.github.com>
Date: Sun, 31 Mar 2024 16:06:43 +0800
Subject: [PATCH] feat(image-preview): export onLoad and style for image slot
 (#12740)

---
 .../vant/src/image-preview/ImagePreviewItem.tsx |  6 +++++-
 packages/vant/src/image-preview/README.md       |  2 +-
 packages/vant/src/image-preview/README.zh-CN.md | 10 +++++-----
 .../vant/src/image-preview/test/index.spec.ts   | 17 +++++++++++++++++
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/vant/src/image-preview/ImagePreviewItem.tsx b/packages/vant/src/image-preview/ImagePreviewItem.tsx
index 8a34f28ec415..229cca488dcb 100644
--- a/packages/vant/src/image-preview/ImagePreviewItem.tsx
+++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx
@@ -407,7 +407,11 @@ export default defineComponent({
         >
           {slots.image ? (
             <div class={bem('image-wrap')}>
-              {slots.image({ src: props.src })}
+              {slots.image({
+                src: props.src,
+                onLoad,
+                style: imageStyle.value,
+              })}
             </div>
           ) : (
             <Image
diff --git a/packages/vant/src/image-preview/README.md b/packages/vant/src/image-preview/README.md
index ffe527247a27..48e0f28c45e9 100644
--- a/packages/vant/src/image-preview/README.md
+++ b/packages/vant/src/image-preview/README.md
@@ -302,7 +302,7 @@ imagePreviewRef.value?.swipeTo(1);
 | --- | --- | --- |
 | index | Custom index | _{ index: index of current image }_ |
 | cover | Custom content that covers the image preview | - |
-| image | Custom image content | _{ src: current image src }_ |
+| image | Custom image content | _{ src: current image src, onLoad: load image, style: current image style }_ |
 
 ### onClose Parameters
 
diff --git a/packages/vant/src/image-preview/README.zh-CN.md b/packages/vant/src/image-preview/README.zh-CN.md
index e69e8ebb0437..7f4d7cbbe360 100644
--- a/packages/vant/src/image-preview/README.zh-CN.md
+++ b/packages/vant/src/image-preview/README.zh-CN.md
@@ -307,11 +307,11 @@ imagePreviewRef.value?.swipeTo(1);
 
 通过组件调用 `ImagePreview` 时，支持以下插槽：
 
-| 名称  | 说明                           | 参数                        |
-| ----- | ------------------------------ | --------------------------- |
-| index | 自定义页码内容                 | _{ index: 当前图片的索引 }_ |
-| cover | 自定义覆盖在图片预览上方的内容 | -                           |
-| image | 自定义图片内容                 | _{ src: 当前资源地址 }_     |
+| 名称 | 说明 | 参数 |
+| --- | --- | --- |
+| index | 自定义页码内容 | _{ index: 当前图片的索引 }_ |
+| cover | 自定义覆盖在图片预览上方的内容 | - |
+| image | 自定义图片内容 | _{ src: 当前资源地址, onLoad: 加载图片函数, style: 当前图片样式 }_ |
 
 ### onClose 回调参数
 
diff --git a/packages/vant/src/image-preview/test/index.spec.ts b/packages/vant/src/image-preview/test/index.spec.ts
index 25dddcd910c9..94525b683a1a 100644
--- a/packages/vant/src/image-preview/test/index.spec.ts
+++ b/packages/vant/src/image-preview/test/index.spec.ts
@@ -403,6 +403,23 @@ test('should render image slot correctly 2', async () => {
   expect(wrapper.html().includes('video')).toBeTruthy();
 });
 
+test('should render image slot correctly 3', async () => {
+  const wrapper = mount(ImagePreview, {
+    props: {
+      show: true,
+      images,
+    },
+    slots: {
+      image: ({ src, style }) =>
+        `<img class="test-img" src="${src}" style="${Object.assign({ width: '100px' }, style)}" />`,
+    },
+  });
+
+  await later();
+
+  expect(wrapper.html().includes('width: 100px')).toBeTruthy();
+});
+
 test('should emit long-press event after long press', async () => {
   const onLongPress = vi.fn();
   const wrapper = mount(ImagePreview, {