From 46b23e4badd183de6af9a756d98f21daa0e940df Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Mon, 23 Jan 2023 09:35:08 +0800
Subject: [PATCH] feat(ImagePreview): add swipe when image is moved to edge
 (#11505)

---
 .../src/image-preview/ImagePreviewItem.tsx    | 33 ++++++++++++++-----
 packages/vant/vant.config.mjs                 |  1 +
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/vant/src/image-preview/ImagePreviewItem.tsx b/packages/vant/src/image-preview/ImagePreviewItem.tsx
index 521fb0b7b..d9b9e359f 100644
--- a/packages/vant/src/image-preview/ImagePreviewItem.tsx
+++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx
@@ -144,6 +144,7 @@ export default defineComponent({
     let startDistance: number;
     let doubleTapTimer: ReturnType<typeof setTimeout> | null;
     let touchStartTime: number;
+    let isImageMoved = false;
 
     const onTouchStart = (event: TouchEvent) => {
       const { touches } = event;
@@ -161,6 +162,9 @@ export default defineComponent({
       startMoveY = state.moveY;
       touchStartTime = Date.now();
 
+      // whether the image position is moved after scaling
+      isImageMoved = false;
+
       state.moving = fingerNum === 1 && state.scale !== 1;
       state.zooming = fingerNum === 2 && !offsetX.value;
 
@@ -175,23 +179,36 @@ export default defineComponent({
 
       touch.move(event);
 
-      if (state.moving || state.zooming) {
-        preventDefault(event, true);
-      }
-
       if (state.moving) {
         const { deltaX, deltaY } = touch;
         const moveX = deltaX.value + startMoveX;
         const moveY = deltaY.value + startMoveY;
+
+        // if the image is moved to the edge, no longer trigger move,
+        // allow user to swipe to next image
+        if (
+          (moveX > maxMoveX.value || moveX < -maxMoveX.value) &&
+          !isImageMoved
+        ) {
+          state.moving = false;
+          return;
+        }
+
+        isImageMoved = true;
+        preventDefault(event, true);
         state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value);
         state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
       }
 
-      if (state.zooming && touches.length === 2) {
-        const distance = getDistance(touches);
-        const scale = (startScale * distance) / startDistance;
+      if (state.zooming) {
+        preventDefault(event, true);
 
-        setScale(scale);
+        if (touches.length === 2) {
+          const distance = getDistance(touches);
+          const scale = (startScale * distance) / startDistance;
+
+          setScale(scale);
+        }
       }
     };
 
diff --git a/packages/vant/vant.config.mjs b/packages/vant/vant.config.mjs
index 0235ea82a..dc8f35219 100644
--- a/packages/vant/vant.config.mjs
+++ b/packages/vant/vant.config.mjs
@@ -24,6 +24,7 @@ export default {
     defaultLang: 'en-US',
     darkModeClass: 'van-theme-dark',
     lightModeClass: 'van-theme-light',
+    enableVConsole: false,
     versions: [
       { label: 'v1', link: '/vant/v1/' },
       { label: 'v2', link: '/vant/v2/' },