fix(image-viewer): 键盘事件解绑时机错误

Tencent · Sep 18, 2022 · 82de4e8 · 82de4e8
1 parent 931b067
commit 82de4e8
Showing 1 changed file with 11 additions and 7 deletions.
diff --git a/src/image-viewer/image-viewer.tsx b/src/image-viewer/image-viewer.tsx
@@ -1,5 +1,5 @@
 import {
-  computed, defineComponent, ref, toRefs, onMounted, onBeforeUnmount,
+  computed, defineComponent, ref, toRefs, onMounted, onBeforeUnmount, watch,
 } from '@vue/composition-api';
 import { ChevronLeftIcon, ChevronDownIcon, CloseIcon } from 'tdesign-icons-vue';
 
@@ -130,13 +130,17 @@ export default defineComponent({
           break;
       }
     };
-    onMounted(() => {
-      window.addEventListener('keydown', keydownHandler);
-    });
 
-    onBeforeUnmount(() => {
-      window.removeEventListener('keydown', keydownHandler);
-    });
+    watch(
+      () => visibleValue.value,
+      (val) => {
+        if (val) {
+          window.addEventListener('keydown', keydownHandler);
+          return;
+        }
+        window.removeEventListener('keydown', keydownHandler);
+      },
+    );
 
     const onWheel = (e: WheelEvent) => {
       e.preventDefault();