From 2056ba9eedf9d4f3bb0ab1ae6738941edcda6c17 Mon Sep 17 00:00:00 2001
From: sinbadli <bless_lee@126.com>
Date: Wed, 6 Dec 2023 17:22:29 +0800
Subject: [PATCH] =?UTF-8?q?fix(image-viewer):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E9=94=AE=E7=9B=98=E4=BA=8B=E4=BB=B6=E7=BB=91=E5=AE=9A=E5=AF=B9?=
 =?UTF-8?q?=E8=B1=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修改键盘事件绑定对象

2019
---
 src/image-viewer/image-viewer.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/image-viewer/image-viewer.tsx b/src/image-viewer/image-viewer.tsx
index e0a5dacca..33dd8470d 100644
--- a/src/image-viewer/image-viewer.tsx
+++ b/src/image-viewer/image-viewer.tsx
@@ -99,7 +99,6 @@ export default defineComponent({
       setVisibleValue(false);
 
       unmountContent();
-      window.removeEventListener('keydown', keydownHandler);
 
       props.onClose?.(ctx);
       emit('close', ctx);
@@ -114,6 +113,8 @@ export default defineComponent({
     };
 
     const keydownHandler = (e: KeyboardEvent) => {
+      e.stopPropagation();
+
       switch (e.code) {
         case EVENT_CODE.left:
           prevImage();
@@ -148,14 +149,20 @@ export default defineComponent({
         containerRef.value.unmountContent();
       }
     };
-
+    const divRef = ref<HTMLDivElement>();
+    const getFocus = () => {
+      if (divRef.value) {
+        // 只设置tabindex值无法自动获取到焦点，使用focus获取焦点
+        divRef.value.focus();
+      }
+    };
     watch(
       () => visibleValue.value,
       (val) => {
         if (val) {
           onRest();
-          window.addEventListener('keydown', keydownHandler);
           mountContent();
+          getFocus();
         }
       },
     );
@@ -205,6 +212,8 @@ export default defineComponent({
       scale,
       isMultipleImg,
       containerRef,
+      keydownHandler,
+      divRef,
     };
   },
   methods: {
@@ -295,7 +304,14 @@ export default defineComponent({
     },
     renderViewer() {
       return (
-        <div class={this.wrapClass} style={{ zIndex: this.zIndexValue }} onWheel={this.onWheel}>
+        <div
+          tabindex={-1}
+          onKeydown={this.keydownHandler}
+          ref="divRef"
+          class={this.wrapClass}
+          style={{ zIndex: this.zIndexValue }}
+          onWheel={this.onWheel}
+        >
           {!!this.showOverlayValue && (
             <div class={`${this.COMPONENT_NAME}__modal-mask`} onClick={this.clickOverlayHandler} />
           )}