mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
docs(ImagePreview): improve document (#11137)
This commit is contained in:
neverland
GitHub
parent
7d48159e65
commit
97d2badd45
@ -118,12 +118,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>
|
||||
```
|
||||
@ -134,21 +138,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,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -254,7 +251,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
|
||||
|
||||
|
||||
@ -172,12 +172,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>
|
||||
```
|
||||
@ -188,21 +192,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,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -311,11 +308,11 @@ imagePreviewRef.value?.swipeTo(1);
|
||||
|
||||
通过组件调用 `ImagePreview` 时，支持以下插槽：
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
| ----- | ------------------------------ | ------------------------- |
|
||||
| index | 自定义页码内容 | { index: 当前图片的索引 } |
|
||||
| cover | 自定义覆盖在图片预览上方的内容 | - |
|
||||
| image | 自定义图片插槽 | { src: 当前资源地址 } |
|
||||
| 名称 | 说明 | 参数 |
|
||||
| -------------- | ------------------------------ | ------------------------- |
|
||||
| index | 自定义页码内容 | { index: 当前图片的索引 } |
|
||||
| cover | 自定义覆盖在图片预览上方的内容 | - |
|
||||
| image `v3.6.5` | 自定义图片内容 | { src: 当前资源地址 } |
|
||||
|
||||
### onClose 回调参数
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ const t = useTranslate({
|
||||
customConfig: '传入配置项',
|
||||
startPosition: '指定初始位置',
|
||||
componentCall: '组件调用',
|
||||
componentImage: '组件调用使用image插槽',
|
||||
useImageSlot: '使用 image 插槽',
|
||||
index: (index: number) => `第${index + 1}页`,
|
||||
},
|
||||
'en-US': {
|
||||
@ -29,7 +29,7 @@ const t = useTranslate({
|
||||
customConfig: 'Custom Config',
|
||||
startPosition: 'Set Start Position',
|
||||
componentCall: 'Component Call',
|
||||
componentImage: 'Component Call use image slot',
|
||||
useImageSlot: 'Use image slot',
|
||||
index: (index: number) => `Page: ${index}`,
|
||||
},
|
||||
});
|
||||
@ -52,7 +52,6 @@ const show = ref(false);
|
||||
const index = ref(0);
|
||||
|
||||
const showSlot = ref(false);
|
||||
const indexSlot = ref(0);
|
||||
|
||||
const onClose = () => Toast(t('closed'));
|
||||
|
||||
@ -75,10 +74,6 @@ const showComponentCallSlot = () => {
|
||||
showSlot.value = true;
|
||||
};
|
||||
|
||||
const onChangeSlot = (newIndex: number) => {
|
||||
indexSlot.value = newIndex;
|
||||
};
|
||||
|
||||
const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
|
||||
const instance = ImagePreview({
|
||||
images,
|
||||
@ -131,19 +126,17 @@ const showImagePreview = (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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user