feat(ImagePreview): add enableDoubleScale option (#12360)

* feat: add enableDoubleSclae

* feat: add enableDoubleScale attribute

* Update package.json

---------

Co-authored-by: neverland <jait.chen@foxmail.com>

packages/vant/src/image-preview/ImagePreview.tsx

@@ -72,6 +72,7 @@ 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>;
@@ -178,6 +179,7 @@ export default defineComponent({
             onScale={emitScale}
             onClose={emitClose}
             onLongPress={() => emit('longPress', { index })}
+            enableDoubleScale={props.enableDoubleScale}
           />
         ))}
       </Swipe>

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

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
 

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
 

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

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

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