From b493fb80d6c2ba11a1c4ab3b6c394615724b8ae3 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sat, 14 Oct 2023 18:16:41 +0800
Subject: [PATCH] chore(ImagePreview): rename doubleScale and add test case
(#12366)
---
.../vant/src/image-preview/ImagePreview.tsx | 4 ++--
.../src/image-preview/ImagePreviewItem.tsx | 4 ++--
packages/vant/src/image-preview/README.md | 4 ++--
.../vant/src/image-preview/README.zh-CN.md | 4 ++--
.../vant/src/image-preview/function-call.tsx | 2 +-
.../vant/src/image-preview/test/index.spec.ts | 20 ++++++++++++++++++-
packages/vant/src/image-preview/types.ts | 2 +-
7 files changed, 29 insertions(+), 11 deletions(-)
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<Interceptor>,
+ doubleScale: truthProp,
overlayClass: unknownProp,
overlayStyle: Object as PropType<CSSProperties>,
swipeDuration: makeNumericProp(300),
@@ -72,7 +73,6 @@ export const imagePreviewProps = {
closeOnClickOverlay: truthProp,
closeIconPosition: makeStringProp<PopupCloseIconPosition>('top-right'),
teleport: [String, Object] as PropType<TeleportProps['to']>,
- enableDoubleScale: truthProp,
};
export type ImagePreviewProps = ExtractPropTypes<typeof imagePreviewProps>;
@@ -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}
/>
))}
</Swipe>
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\<boolean\>_ | - |
| 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\<boolean\>_ | - |
| 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 = {