fix: 修复监听器重复注册导致重复粘贴的问题

src/cpns/ClipFullData.vue

@@ -30,7 +30,7 @@
 <script setup>
 import FileList from './FileList.vue'
 import ClipOperate from './ClipOperate.vue'
-import { onMounted } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 
 const props = defineProps({
   isShow: {
@@ -49,15 +49,21 @@ const onOverlayClick = () => {
   emit('onOverlayClick')
 }
 
-onMounted(() => {
-  document.addEventListener('keydown', (e) => {
+const keyDownCallBack = (e) => {
   const { key } = e
   if (key === 'Escape' && props.fullData.data) {
     // 有值时执行退出 Overlay
     emit('onOverlayClick')
     e.stopPropagation()
   }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', keyDownCallBack)
 })
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', keyDownCallBack)
 })
 </script>
 

src/cpns/ClipItemList.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import FileList from './FileList.vue'
 import ClipOperate from './ClipOperate.vue'
@@ -196,9 +196,8 @@ watch(
   () => props.showList,
   () => (activeIndex.value = 0)
 )
-onMounted(() => {
-  // 监听键盘事件
-  document.addEventListener('keydown', (e) => {
+
+const keyDownCallBack = (e) => {
   const { key, ctrlKey, metaKey, altKey } = e
   const isArrowUp = key === 'ArrowUp'
   const isArrowDown = key === 'ArrowDown'
@@ -239,6 +238,7 @@ onMounted(() => {
     }
   } else if (isEnter) {
     if (!props.isMultiple) {
+      console.log('isEnter')
       window.copy(props.showList[activeIndex.value])
       window.paste()
       ElMessage({
@@ -276,8 +276,8 @@ onMounted(() => {
         .scrollIntoView({ block: 'nearest', inline: 'nearest' })
     }
   }
-  })
-  document.addEventListener('keyup', (e) => {
+}
+const keyUpCallBack = (e) => {
   const { key } = e
   const isShift = key === 'Shift'
   if (isShift) {
@@ -285,7 +285,17 @@ onMounted(() => {
       isShiftDown.value = false
     }
   }
+}
+
+onMounted(() => {
+  // 监听键盘事件
+  document.addEventListener('keydown', keyDownCallBack)
+  document.addEventListener('keyup', keyUpCallBack)
 })
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', keyDownCallBack)
+  document.removeEventListener('keyup', keyUpCallBack)
 })
 </script>
 

src/views/Main.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted, computed, nextTick } from 'vue'
+import { ref, watch, onMounted, onUnmounted, computed, nextTick } from 'vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import ClipItemList from '../cpns/ClipItemList.vue'
 import ClipFullData from '../cpns/ClipFullData.vue'
@@ -263,7 +263,7 @@ onMounted(() => {
   }
 
   // 列表懒加载
-  document.addEventListener('scroll', (e) => {
+  const scrollCallBack = (e) => {
     const { scrollTop, clientHeight, scrollHeight } = e.target.scrollingElement
     if (scrollTop + clientHeight + 5 >= scrollHeight) {
       offset.value += GAP
@@ -280,10 +280,10 @@ onMounted(() => {
         showList.value.push(...addition)
       }
     }
-  })
+  }
 
   // 监听键盘事件
-  document.addEventListener('keydown', (e) => {
+  const keyDownCallBack = (e) => {
     const { key, ctrlKey, metaKey } = e
     const isTab = key === 'Tab'
     const isSearch =
@@ -336,6 +336,14 @@ onMounted(() => {
     } else {
       window.focus() // 其他键盘事件 直接聚焦搜索框
     }
+  }
+
+  document.addEventListener('scroll', scrollCallBack)
+  document.addEventListener('keydown', keyDownCallBack)
+
+  onUnmounted(() => {
+    document.removeEventListener('scroll', scrollCallBack)
+    document.removeEventListener('keydown', keyDownCallBack)
   })
 })
 </script>