From 7a42c9a6168690af657ba837f547c10750b29b26 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sun, 22 Jan 2023 20:37:10 +0800
Subject: [PATCH] fix(ImagePreview): disable zoom when swiping (#11504)

---
 .../vant/src/image-preview/ImagePreview.tsx   | 20 +++++++++++++++----
 .../src/image-preview/ImagePreviewItem.tsx    |  8 +++++++-
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/vant/src/image-preview/ImagePreview.tsx b/packages/vant/src/image-preview/ImagePreview.tsx
index b8d525fe3..0220cd0ed 100644
--- a/packages/vant/src/image-preview/ImagePreview.tsx
+++ b/packages/vant/src/image-preview/ImagePreview.tsx
@@ -44,10 +44,10 @@ const [name, bem] = createNamespace('image-preview');
 
 const popupProps = [
   'show',
+  'teleport',
   'transition',
   'overlayStyle',
   'closeOnPopstate',
-  'teleport'
 ] as const;
 
 export const imagePreviewProps = {
@@ -89,6 +89,7 @@ export default defineComponent({
       active: 0,
       rootWidth: 0,
       rootHeight: 0,
+      disableZoom: false,
     });
 
     const resize = () => {
@@ -137,6 +138,14 @@ export default defineComponent({
       }
     };
 
+    const onDragStart = () => {
+      state.disableZoom = true;
+    };
+
+    const onDragEnd = () => {
+      state.disableZoom = false;
+    };
+
     const renderImages = () => (
       <Swipe
         ref={swipeRef}
@@ -148,9 +157,14 @@ export default defineComponent({
         showIndicators={props.showIndicators}
         indicatorColor="white"
         onChange={setActive}
+        onDragEnd={onDragEnd}
+        onDragStart={onDragStart}
       >
         {props.images.map((image, index) => (
           <ImagePreviewItem
+            v-slots={{
+              image: slots.image,
+            }}
             src={image}
             show={props.show}
             active={state.active}
@@ -158,12 +172,10 @@ export default defineComponent({
             minZoom={props.minZoom}
             rootWidth={state.rootWidth}
             rootHeight={state.rootHeight}
+            disableZoom={state.disableZoom}
             onScale={emitScale}
             onClose={emitClose}
             onLongPress={() => emit('longPress', { index })}
-            v-slots={{
-              image: slots.image,
-            }}
           />
         ))}
       </Swipe>
diff --git a/packages/vant/src/image-preview/ImagePreviewItem.tsx b/packages/vant/src/image-preview/ImagePreviewItem.tsx
index e9680868b..521fb0b7b 100644
--- a/packages/vant/src/image-preview/ImagePreviewItem.tsx
+++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx
@@ -44,6 +44,7 @@ export default defineComponent({
     maxZoom: makeRequiredProp(numericProp),
     rootWidth: makeRequiredProp(Number),
     rootHeight: makeRequiredProp(Number),
+    disableZoom: Boolean,
   },
 
   emits: ['scale', 'close', 'longPress'],
@@ -146,11 +147,16 @@ export default defineComponent({
 
     const onTouchStart = (event: TouchEvent) => {
       const { touches } = event;
+      fingerNum = touches.length;
+
+      if (fingerNum === 2 && props.disableZoom) {
+        return;
+      }
+
       const { offsetX } = touch;
 
       touch.start(event);
 
-      fingerNum = touches.length;
       startMoveX = state.moveX;
       startMoveY = state.moveY;
       touchStartTime = Date.now();