blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(ImagePreview): add image slot scale guide (#12751)

Browse Source
This commit is contained in:
neverland 2024-03-31 20:23:04 +08:00 committed by GitHub
parent b332c1643a
commit 83bcbf5738
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -185,6 +185,20 @@ export default {
}; };
``` ```
When you customize the image through the `image` slot, you can bind the `style` and `onLoad` callback through the params of the slot, which can allow the `<img>` tag to support image scaling.
```html
<van-image-preview
v-model:show="show"
:images="images"
:close-on-click-image="false"
>
<template #image="{ src, style, onLoad }">
<img :style="[{ width: '100%' }, style]" @load="onLoad" />
</template>
</van-image-preview>
```
## API ## API
### Methods ### Methods

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

@ -186,6 +186,20 @@ export default {
}; };
``` ```
当你通过 `image` 插槽自定义图片时，可以通过插槽的参数绑定 `style` 样式和 `onLoad` 回调函数，这可以让 `<img>` 标签支持图片缩放。
```html
<van-image-preview
v-model:show="show"
:images="images"
:close-on-click-image="false"
>
<template #image="{ src, style, onLoad }">
<img :style="[{ width: '100%' }, style]" @load="onLoad" />
</template>
</van-image-preview>
```
## API ## API
### 方法 ### 方法