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')
 }
 
+const keyDownCallBack = (e) => {
+  const { key } = e
+  if (key === 'Escape' && props.fullData.data) {
+    // 有值时执行退出 Overlay
+    emit('onOverlayClick')
+    e.stopPropagation()
+  }
+}
+
 onMounted(() => {
-  document.addEventListener('keydown', (e) => {
+  document.addEventListener('keydown', keyDownCallBack)
-    const { key } = e
+})
-    if (key === 'Escape' && props.fullData.data) {
+
-      // 有值时执行退出 Overlay
+onUnmounted(() => {
-      emit('onOverlayClick')
+  document.removeEventListener('keydown', keyDownCallBack)
-      e.stopPropagation()
-    }
-  })
 })
 </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,96 +196,106 @@ watch(
   () => props.showList,
   () => (activeIndex.value = 0)
 )
-onMounted(() => {
+
-  // 监听键盘事件
+const keyDownCallBack = (e) => {
-  document.addEventListener('keydown', (e) => {
+  const { key, ctrlKey, metaKey, altKey } = e
-    const { key, ctrlKey, metaKey, altKey } = e
+  const isArrowUp = key === 'ArrowUp'
-    const isArrowUp = key === 'ArrowUp'
+  const isArrowDown = key === 'ArrowDown'
-    const isArrowDown = key === 'ArrowDown'
+  const isEnter = key === 'Enter'
-    const isEnter = key === 'Enter'
+  const isCopy = (ctrlKey || metaKey) && (key === 'C' || key === 'c')
-    const isCopy = (ctrlKey || metaKey) && (key === 'C' || key === 'c')
+  const isNumber = parseInt(key) <= 9 && parseInt(key) >= 0
-    const isNumber = parseInt(key) <= 9 && parseInt(key) >= 0
+  const isShift = key === 'Shift'
-    const isShift = key === 'Shift'
+  const isSpace = key === ' '
-    const isSpace = key === ' '
+  const activeNode = !props.isMultiple
-    const activeNode = !props.isMultiple
+    ? document.querySelector('.clip-item.active' + (isArrowDown ? '+.clip-item' : ''))
-      ? document.querySelector('.clip-item.active' + (isArrowDown ? '+.clip-item' : ''))
+    : document.querySelector('.clip-item.multi-active' + (isArrowDown ? '+.clip-item' : ''))
-      : document.querySelector('.clip-item.multi-active' + (isArrowDown ? '+.clip-item' : ''))
+  if (isArrowUp) {
-    if (isArrowUp) {
+    if (activeIndex.value === 1) window.toTop()
-      if (activeIndex.value === 1) window.toTop()
+    if (activeIndex.value > 0) {
-      if (activeIndex.value > 0) {
+      activeIndex.value--
-        activeIndex.value--
+      activeNode.previousElementSibling.previousElementSibling.scrollIntoView({
-        activeNode.previousElementSibling.previousElementSibling.scrollIntoView({
+        block: 'nearest',
-          block: 'nearest',
+        inline: 'nearest'
-          inline: 'nearest'
+      })
-        })
+    }
-      }
+  } else if (isArrowDown) {
-    } else if (isArrowDown) {
+    if (activeIndex.value < props.showList.length - 1) {
-      if (activeIndex.value < props.showList.length - 1) {
+      activeIndex.value++
-        activeIndex.value++
+      activeNode.scrollIntoView({ block: 'nearest', inline: 'nearest' })
-        activeNode.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    }
-      }
+  } else if (isCopy) {
-    } else if (isCopy) {
+    if (!props.fullData.data) {
-      if (!props.fullData.data) {
+      // 如果侧栏中有数据 证明侧栏是打开的 不执行复制
-        // 如果侧栏中有数据 证明侧栏是打开的 不执行复制
-        if (!props.isMultiple) {
-          window.copy(props.showList[activeIndex.value])
-          ElMessage({
-            message: '复制成功',
-            type: 'success'
-          })
-        } else {
-          emit('onMultiCopyExecute', false)
-        }
-      }
-    } else if (isEnter) {
       if (!props.isMultiple) {
         window.copy(props.showList[activeIndex.value])
-        window.paste()
         ElMessage({
           message: '复制成功',
           type: 'success'
         })
       } else {
-        emit('onMultiCopyExecute', true)
+        emit('onMultiCopyExecute', false)
       }
-    } else if ((ctrlKey || metaKey || altKey) && isNumber) {
+    }
-      window.copy(props.showList[parseInt(key) - 1])
+  } else if (isEnter) {
+    if (!props.isMultiple) {
+      console.log('isEnter')
+      window.copy(props.showList[activeIndex.value])
       window.paste()
-      selectItemList.value = []
+      ElMessage({
-    } else if (isShift) {
+        message: '复制成功',
-      if (props.isMultiple) {
+        type: 'success'
-        isShiftDown.value = true
+      })
-      }
+    } else {
-    } else if (isSpace) {
+      emit('onMultiCopyExecute', true)
-      if (props.isSearchPanelExpand) {
-        // 搜索栏展开状态 不进入多选
-        return
-      }
-      if (!props.isMultiple) {
-        emit('toggleMultiSelect') // 如果不是多选状态 则切换到多选状态
-      }
-      e.preventDefault()
-      const i = selectItemList.value.findIndex((item) => item === props.showList[activeIndex.value])
-      if (i !== -1) {
-        selectItemList.value.splice(i, 1) // 如果已选中 则取消选中
-      } else {
-        selectItemList.value.push(props.showList[activeIndex.value]) // 如果未选中 则选中
-        activeIndex.value++
-        document
-          .querySelector('.clip-item.multi-active+.clip-item')
-          .scrollIntoView({ block: 'nearest', inline: 'nearest' })
-      }
     }
-  })
+  } else if ((ctrlKey || metaKey || altKey) && isNumber) {
-  document.addEventListener('keyup', (e) => {
+    window.copy(props.showList[parseInt(key) - 1])
-    const { key } = e
+    window.paste()
-    const isShift = key === 'Shift'
+    selectItemList.value = []
-    if (isShift) {
+  } else if (isShift) {
-      if (props.isMultiple) {
+    if (props.isMultiple) {
-        isShiftDown.value = false
+      isShiftDown.value = true
-      }
     }
-  })
+  } else if (isSpace) {
+    if (props.isSearchPanelExpand) {
+      // 搜索栏展开状态 不进入多选
+      return
+    }
+    if (!props.isMultiple) {
+      emit('toggleMultiSelect') // 如果不是多选状态 则切换到多选状态
+    }
+    e.preventDefault()
+    const i = selectItemList.value.findIndex((item) => item === props.showList[activeIndex.value])
+    if (i !== -1) {
+      selectItemList.value.splice(i, 1) // 如果已选中 则取消选中
+    } else {
+      selectItemList.value.push(props.showList[activeIndex.value]) // 如果未选中 则选中
+      activeIndex.value++
+      document
+        .querySelector('.clip-item.multi-active+.clip-item')
+        .scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    }
+  }
+}
+const keyUpCallBack = (e) => {
+  const { key } = e
+  const isShift = key === 'Shift'
+  if (isShift) {
+    if (props.isMultiple) {
+      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>