From 1405513573538a60dcecd4a067f3ff599ad598fe Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Wed, 25 May 2022 00:12:57 +0800
Subject: [PATCH 1/2] feat: enable the left or right keyboard to switch image

---
 components/vc-image/src/Preview.tsx | 30 +++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/components/vc-image/src/Preview.tsx b/components/vc-image/src/Preview.tsx
index aada154b1a..e451fe4cdc 100644
--- a/components/vc-image/src/Preview.tsx
+++ b/components/vc-image/src/Preview.tsx
@@ -15,6 +15,7 @@ import Dialog from '../../vc-dialog';
 import { type IDialogChildProps, dialogPropTypes } from '../../vc-dialog/IDialogPropTypes';
 import { getOffset } from '../../vc-util/Dom/css';
 import addEventListener from '../../vc-util/Dom/addEventListener';
+import KeyCode from '../../_util/KeyCode';
 import { warning } from '../../vc-util/warning';
 import useFrameSetState from './hooks/useFrameSetState';
 import getFixScaleEleTransPosition from './getFixScaleEleTransPosition';
@@ -221,6 +222,32 @@ const Preview = defineComponent({
       lastWheelZoomDirection.value = { wheelDirection };
     };
 
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (!props.visible || !showLeftOrRightSwitches.value) return;
+
+      event.preventDefault();
+      if (event.keyCode === KeyCode.LEFT) {
+        if (currentPreviewIndex.value > 0) {
+          setCurrent(previewUrlsKeys.value[currentPreviewIndex.value - 1]);
+        }
+      } else if (event.keyCode === KeyCode.RIGHT) {
+        if (currentPreviewIndex.value < previewGroupCount.value - 1) {
+          setCurrent(previewUrlsKeys.value[currentPreviewIndex.value + 1]);
+        }
+      }
+    };
+
+    const onDoubleClick = () => {
+      if (props.visible) {
+        if (scale.value !== 1) {
+          scale.value = 1;
+        }
+        if (position.x !== initialPosition.x || position.y !== initialPosition.y) {
+          setPosition(initialPosition);
+        }
+      }
+    };
+
     let removeListeners = () => {};
     onMounted(() => {
       watch(
@@ -235,6 +262,7 @@ const Preview = defineComponent({
           const onScrollWheelListener = addEventListener(window, 'wheel', onWheelMove, {
             passive: false,
           });
+          const onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false);
 
           try {
             // Resolve if in iframe lost event
@@ -257,6 +285,7 @@ const Preview = defineComponent({
             onMouseUpListener.remove();
             onMouseMoveListener.remove();
             onScrollWheelListener.remove();
+            onKeyDownListener.remove();
 
             /* istanbul ignore next */
             if (onTopMouseUpListener) onTopMouseUpListener.remove();
@@ -310,6 +339,7 @@ const Preview = defineComponent({
           >
             <img
               onMousedown={onMouseDown}
+              onDoubleClick={onDoubleClick}
               ref={imgRef}
               class={`${props.prefixCls}-img`}
               src={combinationSrc.value}

From 00c277bafa7068b434dfdf8203b8053e0a5382e9 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Wed, 25 May 2022 00:33:51 +0800
Subject: [PATCH 2/2] fix: eslint error

---
 components/vc-image/src/Preview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/vc-image/src/Preview.tsx b/components/vc-image/src/Preview.tsx
index e451fe4cdc..58ab378777 100644
--- a/components/vc-image/src/Preview.tsx
+++ b/components/vc-image/src/Preview.tsx
@@ -339,7 +339,7 @@ const Preview = defineComponent({
           >
             <img
               onMousedown={onMouseDown}
-              onDoubleClick={onDoubleClick}
+              onDblclick={onDoubleClick}
               ref={imgRef}
               class={`${props.prefixCls}-img`}
               src={combinationSrc.value}