From 4627211840e41323983db9cc6666ba9d4c9624e1 Mon Sep 17 00:00:00 2001
From: skiars <skiars@qq.com>
Date: Tue, 26 Dec 2023 20:23:52 +0800
Subject: [PATCH] listen windows's keydown/keyup event

---
 src/components/ImageList.vue |  9 ++++++---
 src/components/TagList.vue   | 14 ++++++++++++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/ImageList.vue b/src/components/ImageList.vue
index a98d40a..5e72532 100644
--- a/src/components/ImageList.vue
+++ b/src/components/ImageList.vue
@@ -99,10 +99,14 @@ const resizeObserver = new ResizeObserver((event) => {
 onMounted(() => {
   resizeObserver.observe(panel.value as HTMLElement)
   updateOverlayPanelSize()
+  window.addEventListener("keydown", onKeyDown)
+  window.addEventListener("keyup", onKeyUp)
 })
 
 onUnmounted(() => {
   resizeObserver.unobserve(panel.value as HTMLElement)
+  window.removeEventListener("keydown", onKeyDown)
+  window.removeEventListener("keyup", onKeyUp)
 })
 
 function updateOverlayPanelSize() {
@@ -120,9 +124,8 @@ function updateOverlayPanelSize() {
 </script>
 
 <template>
-  <div ref="panel" class="image-list"
-       v-on:mouseenter="onMouseEnter" v-on:mouseleave="onMouseLeave"
-       :tabindex="-1" v-on:keydown="onKeyDown" v-on:keyup="onKeyUp">
+  <div ref="panel" class="image-list" :tabindex="-1"
+       v-on:mouseenter="onMouseEnter" v-on:mouseleave="onMouseLeave">
     <div v-for="(data, index) in props.dataset" :style="itemStyle"
          :class="['item', selectedSet.has(index) ? 'selected' : undefined]"
          v-on:mouseover="previewSrc = data.url" v-on:click="onClick(index)">
diff --git a/src/components/TagList.vue b/src/components/TagList.vue
index d7026bc..002cc3d 100644
--- a/src/components/TagList.vue
+++ b/src/components/TagList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ref, shallowRef, watch, onUnmounted} from 'vue'
+import {ref, shallowRef, watch, onUnmounted, onMounted} from 'vue'
 import draggable from 'vuedraggable';
 import Tag from './Tag.vue'
 import ContextMenu from 'primevue/contextmenu'
@@ -149,10 +149,20 @@ function onKeyUp(event: KeyboardEvent) {
   if (event.key == 'Shift')
     pressShift = false
 }
+
+onMounted(() => {
+  window.addEventListener("keydown", onKeyDown)
+  window.addEventListener("keyup", onKeyUp)
+})
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", onKeyDown)
+  window.removeEventListener("keyup", onKeyUp)
+})
 </script>
 
 <template>
-  <div class="frame" :tabindex="-1" v-on:keydown="onKeyDown" v-on:keyup="onKeyUp">
+  <div class="frame" :tabindex="-1">
     <draggable class="tag-list"
                v-model="tags"
                :disabled="props.nodrag"