diff --git a/packages/vant/src/image-preview/ImagePreview.tsx b/packages/vant/src/image-preview/ImagePreview.tsx index 4f2b499fa..5b4f3c4a1 100644 --- a/packages/vant/src/image-preview/ImagePreview.tsx +++ b/packages/vant/src/image-preview/ImagePreview.tsx @@ -72,6 +72,7 @@ export const imagePreviewProps = { closeOnClickOverlay: truthProp, closeIconPosition: makeStringProp('top-right'), teleport: [String, Object] as PropType, + enableDoubleScale: truthProp, }; export type ImagePreviewProps = ExtractPropTypes; @@ -178,6 +179,7 @@ export default defineComponent({ onScale={emitScale} onClose={emitClose} onLongPress={() => emit('longPress', { index })} + enableDoubleScale={props.enableDoubleScale} /> ))} diff --git a/packages/vant/src/image-preview/ImagePreviewItem.tsx b/packages/vant/src/image-preview/ImagePreviewItem.tsx index a51f2a3cc..eacf5eb5e 100644 --- a/packages/vant/src/image-preview/ImagePreviewItem.tsx +++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx @@ -54,6 +54,7 @@ export default defineComponent({ rootHeight: makeRequiredProp(Number), disableZoom: Boolean, closeOnClickOverlay: Boolean, + enableDoubleScale: Boolean, }, emits: ['scale', 'close', 'longPress'], @@ -254,23 +255,28 @@ export default defineComponent({ const TAP_TIME = 250; if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET) { - // tap or double tap if (deltaTime < TAP_TIME) { - if (doubleTapTimer) { - clearTimeout(doubleTapTimer); - doubleTapTimer = null; - toggleScale(); - } else { - if ( - !props.closeOnClickOverlay && - event.target === swipeItem.value?.$el - ) { - return; - } - doubleTapTimer = setTimeout(() => { - emit('close'); + // allow double to scale + if (props.enableDoubleScale) { + // tap or double tap + if (doubleTapTimer) { + clearTimeout(doubleTapTimer); doubleTapTimer = null; - }, TAP_TIME); + toggleScale(); + } else { + if ( + !props.closeOnClickOverlay && + event.target === swipeItem.value?.$el + ) { + return; + } + doubleTapTimer = setTimeout(() => { + emit('close'); + doubleTapTimer = null; + }, TAP_TIME); + } + } else { + emit('close'); } } // long press diff --git a/packages/vant/src/image-preview/README.md b/packages/vant/src/image-preview/README.md index fc84186be..0e4c775ee 100644 --- a/packages/vant/src/image-preview/README.md +++ b/packages/vant/src/image-preview/README.md @@ -217,6 +217,7 @@ Vant exports following ImagePreview utility functions: | overlayClass | Custom overlay class | _string \| Array \| object_ | - | | overlayStyle | Custom overlay style | _object_ | - | | teleport | Specifies a target element where ImagePreview will be mounted | _string \| Element_ | - | +| enableDoubleScale | Do you want to enable double click zoom and enable the delay of closing the mask | _boolean_ | `true` | ### Props @@ -242,6 +243,7 @@ Vant exports following ImagePreview utility functions: | overlay-class | Custom overlay class | _string \| Array \| object_ | - | | overlay-style | Custom overlay style | _object_ | - | | teleport | Specifies a target element where ImagePreview will be mounted | _string \| Element_ | - | +| enableDoubleScale | Do you want to enable double click zoom and enable the delay of closing the mask | _boolean_ | `true` | ### Events diff --git a/packages/vant/src/image-preview/README.zh-CN.md b/packages/vant/src/image-preview/README.zh-CN.md index 3381032cd..c6e74dfed 100644 --- a/packages/vant/src/image-preview/README.zh-CN.md +++ b/packages/vant/src/image-preview/README.zh-CN.md @@ -220,6 +220,7 @@ Vant 中导出了以下 ImagePreview 相关的辅助函数: | overlayClass | 自定义遮罩层类名 | _string \| Array \| object_ | - | | overlayStyle | 自定义遮罩层样式 | _object_ | - | | teleport | 指定挂载的节点,等同于 Teleport 组件的 [to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - | +| enableDoubleScale | 是否开启双击缩放,开启蒙层关闭延迟 | _boolean_ | `true` | ### Props @@ -247,6 +248,7 @@ Vant 中导出了以下 ImagePreview 相关的辅助函数: | overlay-class | 自定义遮罩层类名 | _string \| Array \| object_ | - | | overlay-style | 自定义遮罩层样式 | _object_ | - | | teleport | 指定挂载的节点,等同于 Teleport 组件的 [to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - | +| enableDoubleScale | 是否开启双击缩放,开启蒙层关闭延迟 | _boolean_ | `true` | ### Events diff --git a/packages/vant/src/image-preview/function-call.tsx b/packages/vant/src/image-preview/function-call.tsx index a96fdcd5c..6149d1a65 100644 --- a/packages/vant/src/image-preview/function-call.tsx +++ b/packages/vant/src/image-preview/function-call.tsx @@ -28,6 +28,7 @@ const defaultConfig: ImagePreviewOptions = { closeOnPopstate: true, closeOnClickOverlay: true, closeIconPosition: 'top-right', + enableDoubleScale: true, }; function initInstance() { diff --git a/packages/vant/src/image-preview/types.ts b/packages/vant/src/image-preview/types.ts index 75263595e..360da3967 100644 --- a/packages/vant/src/image-preview/types.ts +++ b/packages/vant/src/image-preview/types.ts @@ -31,6 +31,7 @@ export type ImagePreviewOptions = { onClose?(): void; onScale?(args: { scale: number; index: number }): void; onChange?(index: number): void; + enableDoubleScale?: boolean; }; export type ImagePreviewScaleEventParams = { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 80ce3e811..a4ae280ee 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2966,6 +2966,7 @@ packages: /safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} + requiresBuild: true /sax@1.2.4: resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}