diff --git a/packages/vant/src/image-preview/ImagePreview.tsx b/packages/vant/src/image-preview/ImagePreview.tsx index 5b4f3c4a1..0aa0a7d86 100644 --- a/packages/vant/src/image-preview/ImagePreview.tsx +++ b/packages/vant/src/image-preview/ImagePreview.tsx @@ -63,6 +63,7 @@ export const imagePreviewProps = { closeIcon: makeStringProp('clear'), transition: String, beforeClose: Function as PropType, + doubleScale: truthProp, overlayClass: unknownProp, overlayStyle: Object as PropType, swipeDuration: makeNumericProp(300), @@ -72,7 +73,6 @@ export const imagePreviewProps = { closeOnClickOverlay: truthProp, closeIconPosition: makeStringProp('top-right'), teleport: [String, Object] as PropType, - enableDoubleScale: truthProp, }; export type ImagePreviewProps = ExtractPropTypes; @@ -175,11 +175,11 @@ export default defineComponent({ rootWidth={state.rootWidth} rootHeight={state.rootHeight} disableZoom={state.disableZoom} + doubleScale={props.doubleScale} closeOnClickOverlay={props.closeOnClickOverlay} 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 eacf5eb5e..8ef778164 100644 --- a/packages/vant/src/image-preview/ImagePreviewItem.tsx +++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx @@ -53,8 +53,8 @@ export default defineComponent({ rootWidth: makeRequiredProp(Number), rootHeight: makeRequiredProp(Number), disableZoom: Boolean, + doubleScale: Boolean, closeOnClickOverlay: Boolean, - enableDoubleScale: Boolean, }, emits: ['scale', 'close', 'longPress'], @@ -257,7 +257,7 @@ export default defineComponent({ if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET) { if (deltaTime < TAP_TIME) { // allow double to scale - if (props.enableDoubleScale) { + if (props.doubleScale) { // tap or double tap if (doubleTapTimer) { clearTimeout(doubleTapTimer); diff --git a/packages/vant/src/image-preview/README.md b/packages/vant/src/image-preview/README.md index 0e4c775ee..af263544c 100644 --- a/packages/vant/src/image-preview/README.md +++ b/packages/vant/src/image-preview/README.md @@ -205,6 +205,7 @@ Vant exports following ImagePreview utility functions: | onChange | Emitted when current image changed | _Function_ | - | | onScale | Emitted when scaling current image | _Function_ | - | | closeOnPopstate | Whether to close when popstate | _boolean_ | `true` | +| doubleScale `v4.7.2` | Whether to enable double tap zoom gesture. When disabled, the image preview will be closed immediately upon clicking | _boolean_ | `true` | | closeOnClickOverlay `v4.6.4` | Whether to close when overlay is clicked | _boolean_ | `true` | | beforeClose | Callback function before close | _(action) => boolean \| Promise_ | - | | className | Custom className | _string \| Array \| object_ | - | @@ -217,7 +218,6 @@ 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 @@ -230,6 +230,7 @@ Vant exports following ImagePreview utility functions: | show-index | Whether to show index | _boolean_ | `true` | | show-indicators | Whether to show indicators | _boolean_ | `false` | | loop | Whether to enable loop | _boolean_ | `true` | +| double-scale | Whether to enable double tap zoom gesture. When disabled, the image preview will be closed immediately upon clicking | _boolean_ | `true` | | before-close | Callback function before close | _(action: number) => boolean \| Promise\_ | - | | close-on-popstate | Whether to close when popstate | _boolean_ | `true` | | close-on-click-overlay `v4.6.4` | Whether to close when overlay is clicked | _boolean_ | `true` | @@ -243,7 +244,6 @@ 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 c6e74dfed..901e817c1 100644 --- a/packages/vant/src/image-preview/README.zh-CN.md +++ b/packages/vant/src/image-preview/README.zh-CN.md @@ -204,6 +204,7 @@ Vant 中导出了以下 ImagePreview 相关的辅助函数： | showIndex | 是否显示页码 | _boolean_ | `true` | | showIndicators | 是否显示轮播指示器 | _boolean_ | `false` | | loop | 是否开启循环播放 | _boolean_ | `true` | +| doubleScale `v4.7.2` | 是否启用双击缩放手势，禁用后，点击时会立即关闭图片预览 | _boolean_ | `true` | | onClose | 关闭时的回调函数 | _Function_ | - | | onChange | 切换图片时的回调函数，回调参数为当前索引 | _Function_ | - | | onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | _Function_ | - | @@ -220,7 +221,6 @@ 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 @@ -235,6 +235,7 @@ Vant 中导出了以下 ImagePreview 相关的辅助函数： | show-index | 是否显示页码 | _boolean_ | `true` | | show-indicators | 是否显示轮播指示器 | _boolean_ | `false` | | loop | 是否开启循环播放 | _boolean_ | `true` | +| double-scale `v4.7.2` | 是否启用双击缩放手势，禁用后，点击时会立即关闭图片预览 | _boolean_ | `true` | | before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(active: number) => boolean \| Promise\_ | - | | close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `true` | | close-on-click-overlay `v4.6.4` | 是否在点击遮罩层后关闭图片预览 | _boolean_ | `true` | @@ -248,7 +249,6 @@ 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 6149d1a65..04ba194e0 100644 --- a/packages/vant/src/image-preview/function-call.tsx +++ b/packages/vant/src/image-preview/function-call.tsx @@ -20,6 +20,7 @@ const defaultConfig: ImagePreviewOptions = { closeIcon: 'clear', transition: undefined, beforeClose: undefined, + doubleScale: true, overlayStyle: undefined, overlayClass: undefined, startPosition: 0, @@ -28,7 +29,6 @@ const defaultConfig: ImagePreviewOptions = { closeOnPopstate: true, closeOnClickOverlay: true, closeIconPosition: 'top-right', - enableDoubleScale: true, }; function initInstance() { diff --git a/packages/vant/src/image-preview/test/index.spec.ts b/packages/vant/src/image-preview/test/index.spec.ts index 04bf968a5..04669e0f5 100644 --- a/packages/vant/src/image-preview/test/index.spec.ts +++ b/packages/vant/src/image-preview/test/index.spec.ts @@ -217,7 +217,7 @@ test('should not close when overlay is clicked and closeOnClickOverlay is false' expect(wrapper.emitted('close')).toBeFalsy(); }); -test('double click', async () => { +test('should trigger scale after double clicking', async () => { const onScale = vi.fn(); const wrapper = mount(ImagePreview, { props: { @@ -245,6 +245,24 @@ test('double click', async () => { }); }); +test('should allow to disable double click gesture', async () => { + const onScale = vi.fn(); + const wrapper = mount(ImagePreview, { + props: { + images, + show: true, + doubleScale: false, + onScale, + }, + }); + + await later(); + const swipe = wrapper.find('.van-swipe-item'); + triggerDrag(swipe, 0, 0); + triggerDrag(swipe, 0, 0); + expect(onScale).toHaveBeenCalledTimes(0); +}); + test('zoom in and drag image to move', async () => { const restore = mockGetBoundingClientRect({ width: 100, height: 100 }); diff --git a/packages/vant/src/image-preview/types.ts b/packages/vant/src/image-preview/types.ts index 360da3967..23495cedf 100644 --- a/packages/vant/src/image-preview/types.ts +++ b/packages/vant/src/image-preview/types.ts @@ -20,6 +20,7 @@ export type ImagePreviewOptions = { closeIcon?: string; transition?: string; beforeClose?: Interceptor; + doubleScale?: boolean; overlayStyle?: CSSProperties; overlayClass?: unknown; swipeDuration?: number; @@ -31,7 +32,6 @@ export type ImagePreviewOptions = { onClose?(): void; onScale?(args: { scale: number; index: number }): void; onChange?(index: number): void; - enableDoubleScale?: boolean; }; export type ImagePreviewScaleEventParams = {