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): improve document (#11137)

Browse Source
This commit is contained in:
neverland 2022-10-15 22:58:45 +08:00 committed by chenjiahan
parent 1f77796bad
commit 564d751fd8
3 changed files with 30 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -138,12 +138,16 @@ export default {
};
```
### Component Call use image slot
### Use image slot
When using ImagePreview component, you can custom the image through the `image` slot, such as render a video content.
```html
<van-image-preview v-model:show="show" :images="images" @change="onChange">
<template #image="{src}">
<video style="width: 100%;" controls><source :src="src" /></video>
<van-image-preview v-model:show="show" :images="images">
<template #image="{ src }">
<video style="width: 100%;" controls>
<source :src="src" />
</video>
</template>
</van-image-preview>
```
@ -154,21 +158,14 @@ import { ref } from 'vue';
export default {
setup() {
const show = ref(false);
const index = ref(0);
const images = [
'https://www.w3school.com.cn/i/movie.ogg',
'https://www.w3school.com.cn/i/movie.ogg',
'https://www.w3school.com.cn/i/movie.ogg',
];
const onChange = (newIndex) => {
index.value = newIndex;
};
return {
show,
index,
images,
onChange,
};
},
};
@ -282,7 +279,7 @@ imagePreviewRef.value?.swipeTo(1);
| --- | --- | --- |
| index | Custom index | { index: index of current image } |
| cover | Custom content that covers the image preview | - |
| image | Custom image slot | { src: current image src } |
| image `v3.6.5` | Custom image content | { src: current image src } |
### onClose Parameters

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

@ -149,12 +149,16 @@ export default {
};
```
### 组件调用 - 使用 image 插槽
### 使用 image 插槽
当以组件调用的方式使用 ImagePreview 时，可以通过 `image` 插槽来插入自定义的内容，比如展示一个视频内容。
```html
<van-image-preview v-model:show="show" :images="images" @change="onChange">
<template #image="{src}">
<video style="width: 100%;" controls><source :src="src" /></video>
<van-image-preview v-model:show="show" :images="images">
<template #image="{ src }">
<video style="width: 100%;" controls>
<source :src="src" />
</video>
</template>
</van-image-preview>
```
@ -165,21 +169,14 @@ import { ref } from 'vue';
export default {
setup() {
const show = ref(false);
const index = ref(0);
const images = [
'https://www.w3school.com.cn/i/movie.ogg',
'https://www.w3school.com.cn/i/movie.ogg',
'https://www.w3school.com.cn/i/movie.ogg',
];
const onChange = (newIndex) => {
index.value = newIndex;
};
return {
show,
index,
images,
onChange,
};
},
};
@ -296,11 +293,11 @@ imagePreviewRef.value?.swipeTo(1);
通过组件调用 `ImagePreview` 时，支持以下插槽：
| 名称 | 说明 | 参数 |
| ----- | ------------------------------ | ------------------------- |
| index | 自定义页码内容 | { index: 当前图片的索引 } |
| cover | 自定义覆盖在图片预览上方的内容 | - |
| image | 自定义图片插槽 | { src: 当前资源地址 } |
| 名称 | 说明 | 参数 |
| -------------- | ------------------------------ | ------------------------- |
| index | 自定义页码内容 | { index: 当前图片的索引 } |
| cover | 自定义覆盖在图片预览上方的内容 | - |
| image `v3.6.5` | 自定义图片内容 | { src: 当前资源地址 } |
### onClose 回调参数

23
packages/vant/src/image-preview/demo/index.vue
View File

@ -19,7 +19,7 @@ const t = useTranslate({
customConfig: '传入配置项',
startPosition: '指定初始位置',
useComponent: '使用 ImagePreview 组件',
componentImage: '组件调用使用image插槽',
useImageSlot: '使用 image 插槽',
index: (index: number) => `第${index + 1}页`,
},
'en-US': {
@ -31,7 +31,7 @@ const t = useTranslate({
customConfig: 'Custom Config',
startPosition: 'Set Start Position',
useComponent: 'Use ImagePreview Component',
componentImage: 'Component Call use image slot',
useImageSlot: 'Use image slot',
index: (index: number) => `Page: ${index}`,
},
});
@ -54,7 +54,6 @@ const show = ref(false);
const index = ref(0);
const showSlot = ref(false);
const indexSlot = ref(0);
const onClose = () => showToast(t('closed'));
@ -77,10 +76,6 @@ const showComponentCallSlot = () => {
showSlot.value = true;
};
const onChangeSlot = (newIndex: number) => {
indexSlot.value = newIndex;
};
const showFunctionCall = (options: Partial<ImagePreviewOptions> = {}) => {
const instance = showImagePreview({
images,
@ -133,19 +128,17 @@ const showFunctionCall = (options: Partial<ImagePreviewOptions> = {}) => {
</van-image-preview>
</demo-block>
<demo-block card :title="t('componentImage')">
<demo-block card :title="t('useImageSlot')">
<van-cell
is-link
:value="t('componentImage')"
:value="t('useImageSlot')"
@click="showComponentCallSlot"
/>
<van-image-preview
v-model:show="showSlot"
:images="imagesSlot"
@change="onChangeSlot"
>
<van-image-preview v-model:show="showSlot" :images="imagesSlot">
<template #image="{ src }">
<video style="width: 100%" controls><source :src="src" /></video>
<video style="width: 100%" controls>
<source :src="src" />
</video>
</template>
</van-image-preview>
</demo-block>