blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

feat(image-preview): export onLoad and style for image slot (#12740)

Browse Source
This commit is contained in:
chouchouji 2024-03-31 16:06:43 +08:00 committed by GitHub
parent b1e746f45b
commit 3329c3b505
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/vant/src/image-preview/ImagePreviewItem.tsx
View File

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

2
packages/vant/src/image-preview/README.md
View File

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

10
packages/vant/src/image-preview/README.zh-CN.md
View File

@ -307,11 +307,11 @@ imagePreviewRef.value?.swipeTo(1);
通过组件调用 `ImagePreview` 时，支持以下插槽：
| 名称 | 说明 | 参数 |
| ----- | ------------------------------ | --------------------------- |
| index | 自定义页码内容 | _{ index: 当前图片的索引 }_ |
| cover | 自定义覆盖在图片预览上方的内容 | - |
| image | 自定义图片内容 | _{ src: 当前资源地址 }_ |
| 名称 | 说明 | 参数 |
| --- | --- | --- |
| index | 自定义页码内容 | _{ index: 当前图片的索引 }_ |
| cover | 自定义覆盖在图片预览上方的内容 | - |
| image | 自定义图片内容 | _{ src: 当前资源地址, onLoad: 加载图片函数, style: 当前图片样式 }_ |
### onClose 回调参数

17
packages/vant/src/image-preview/test/index.spec.ts
View File

@ -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, {