From f29c55680389f8831482d40796abcb8c1601d87a Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 6 Oct 2023 10:33:50 +0800 Subject: [PATCH] docs(ImagePreview): improve English document (#12345) --- packages/vant/src/image-preview/README.md | 14 ++++++++++++-- packages/vant/src/image-preview/README.zh-CN.md | 6 +++--- packages/vant/src/image-preview/function-call.tsx | 3 +++ 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/vant/src/image-preview/README.md b/packages/vant/src/image-preview/README.md index 394d78c16..fc84186be 100644 --- a/packages/vant/src/image-preview/README.md +++ b/packages/vant/src/image-preview/README.md @@ -32,6 +32,8 @@ showImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg']); ### Basic Usage +When calling `showImagePreview`, you can directly pass an array of images to display the image preview. + ```js import { showImagePreview } from 'vant'; @@ -43,6 +45,8 @@ showImagePreview([ ### Set Start Position +`showImagePreview` supports passing a configuration object, and you can specify the initial position (index value) of the image through the `startPosition` option. + ```js import { showImagePreview } from 'vant'; @@ -57,7 +61,7 @@ showImagePreview({ ### Show Close Icon -After setting the `closeable` attribute, the close icon will be displayed in the upper right corner of the pop-up layer, and the icon can be customized through the `close-icon` attribute, and the icon location can be customized by using the `close-icon-position` attribute. +When the `closeable` option is enabled, a close icon will be displayed in the top-right corner of the popup layer. You can customize the icon by using the `close-icon` option, and the icon position can be customized using the `close-icon-position` option. ```js import { showImagePreview } from 'vant'; @@ -73,6 +77,8 @@ showImagePreview({ ### Close Event +You can listen to the close event of the image preview through the `onClose` option. + ```js import { showToast, showImagePreview } from 'vant'; @@ -89,6 +95,8 @@ showImagePreview({ ### Before Close +You can pass a callback function through the `beforeClose` option to perform specific operations before closing the image preview. + ```js import { showImagePreview } from 'vant'; @@ -107,6 +115,8 @@ setTimeout(() => { ### Use ImagePreview Component +If you need to embed components or other custom content inside the ImagePreview, you can directly use the ImagePreview component and customize it using the `index` slot. Before using it, you need to register the component through `app.use` or other methods. + ```html @@ -179,7 +189,7 @@ Vant exports following ImagePreview utility functions: | Methods | Description | Attribute | Return value | | --- | --- | --- | --- | -| showImagePreview | Show image preview | _string[] \| ImagePreviewOptions_ | ImagePreview Instance | +| showImagePreview | Display a full-screen image preview component | _string[] \| ImagePreviewOptions_ | ImagePreview Instance | ### ImagePreviewOptions diff --git a/packages/vant/src/image-preview/README.zh-CN.md b/packages/vant/src/image-preview/README.zh-CN.md index e5d2af465..3381032cd 100644 --- a/packages/vant/src/image-preview/README.zh-CN.md +++ b/packages/vant/src/image-preview/README.zh-CN.md @@ -61,7 +61,7 @@ showImagePreview({ ### 展示关闭按钮 -设置 `closeable` 属性后，会在弹出层的右上角显示关闭图标，并且可以通过 `close-icon` 属性自定义图标，使用`close-icon-position` 属性可以自定义图标位置。 +开启 `closeable` 选项后，会在弹出层的右上角显示关闭图标，并且可以通过 `close-icon` 属性自定义图标，使用`close-icon-position` 属性可以自定义图标位置。 ```js import { showImagePreview } from 'vant'; @@ -95,7 +95,7 @@ showImagePreview({ ### 异步关闭 -通过 `beforeClose` 属性可以拦截关闭行为。 +通过 `beforeClose` 属性可以传入一个回调函数，在图片预览关闭前进行特定操作。 ```js import { showImagePreview } from 'vant'; @@ -190,7 +190,7 @@ Vant 中导出了以下 ImagePreview 相关的辅助函数： | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | -| showImagePreview | 展示图片预览 | _string[] \| ImagePreviewOptions_ | ImagePreview 实例 | +| showImagePreview | 展示一个全屏的图片预览组件 | _string[] \| ImagePreviewOptions_ | ImagePreview 实例 | ### ImagePreviewOptions diff --git a/packages/vant/src/image-preview/function-call.tsx b/packages/vant/src/image-preview/function-call.tsx index 4ec6dd59f..a96fdcd5c 100644 --- a/packages/vant/src/image-preview/function-call.tsx +++ b/packages/vant/src/image-preview/function-call.tsx @@ -49,6 +49,9 @@ function initInstance() { })); } +/** + * Display a full-screen image preview component + */ export const showImagePreview = ( options: string[] | ImagePreviewOptions, startPosition = 0,