From 97d2badd45e8230f8d4e2a1d743af9dc840e058a Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sat, 15 Oct 2022 22:58:45 +0800
Subject: [PATCH] docs(ImagePreview): improve document (#11137)

---
 packages/vant/src/image-preview/README.md     | 21 ++++++--------
 .../vant/src/image-preview/README.zh-CN.md    | 29 +++++++++----------
 .../vant/src/image-preview/demo/index.vue     | 23 +++++----------
 3 files changed, 30 insertions(+), 43 deletions(-)

diff --git a/packages/vant/src/image-preview/README.md b/packages/vant/src/image-preview/README.md
index f70dfad66..f2e08cc49 100644
--- a/packages/vant/src/image-preview/README.md
+++ b/packages/vant/src/image-preview/README.md
@@ -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
 
diff --git a/packages/vant/src/image-preview/README.zh-CN.md b/packages/vant/src/image-preview/README.zh-CN.md
index b429b02e2..efe217055 100644
--- a/packages/vant/src/image-preview/README.zh-CN.md
+++ b/packages/vant/src/image-preview/README.zh-CN.md
@@ -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 回调参数
 
diff --git a/packages/vant/src/image-preview/demo/index.vue b/packages/vant/src/image-preview/demo/index.vue
index 83baf00d2..f3813d68f 100644
--- a/packages/vant/src/image-preview/demo/index.vue
+++ b/packages/vant/src/image-preview/demo/index.vue
@@ -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>