chore(ImagePreview): rename doubleScale and add test case (#12366)

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>

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);

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
 

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
 

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() {

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 });
 

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 = {