feat(image-preview): export onLoad and style for image slot (youzan#1…

…2740)
bluesky335 · Apr 1, 2024 · 1d8fa52 · 1d8fa52
1 parent 0779694
commit 1d8fa52
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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, {