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

This commit is contained in:
ZiuChen 2022-09-27 00:10:00 +08:00
parent 21a5560516
commit 853e9ad532
3 changed files with 117 additions and 93 deletions

View File

@ -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) => {
const { key } = e
if (key === 'Escape' && props.fullData.data) {
// 退 Overlay
emit('onOverlayClick')
e.stopPropagation()
}
})
document.addEventListener('keydown', keyDownCallBack)
})
onUnmounted(() => {
document.removeEventListener('keydown', keyDownCallBack)
})
</script>

View File

@ -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(() => {
//
document.addEventListener('keydown', (e) => {
const { key, ctrlKey, metaKey, altKey } = e
const isArrowUp = key === 'ArrowUp'
const isArrowDown = key === 'ArrowDown'
const isEnter = key === 'Enter'
const isCopy = (ctrlKey || metaKey) && (key === 'C' || key === 'c')
const isNumber = parseInt(key) <= 9 && parseInt(key) >= 0
const isShift = key === 'Shift'
const isSpace = key === ' '
const activeNode = !props.isMultiple
? document.querySelector('.clip-item.active' + (isArrowDown ? '+.clip-item' : ''))
: document.querySelector('.clip-item.multi-active' + (isArrowDown ? '+.clip-item' : ''))
if (isArrowUp) {
if (activeIndex.value === 1) window.toTop()
if (activeIndex.value > 0) {
activeIndex.value--
activeNode.previousElementSibling.previousElementSibling.scrollIntoView({
block: 'nearest',
inline: 'nearest'
})
}
} else if (isArrowDown) {
if (activeIndex.value < props.showList.length - 1) {
activeIndex.value++
activeNode.scrollIntoView({ block: 'nearest', inline: 'nearest' })
}
} else if (isCopy) {
if (!props.fullData.data) {
//
if (!props.isMultiple) {
window.copy(props.showList[activeIndex.value])
ElMessage({
message: '复制成功',
type: 'success'
})
} else {
emit('onMultiCopyExecute', false)
}
}
} else if (isEnter) {
const keyDownCallBack = (e) => {
const { key, ctrlKey, metaKey, altKey } = e
const isArrowUp = key === 'ArrowUp'
const isArrowDown = key === 'ArrowDown'
const isEnter = key === 'Enter'
const isCopy = (ctrlKey || metaKey) && (key === 'C' || key === 'c')
const isNumber = parseInt(key) <= 9 && parseInt(key) >= 0
const isShift = key === 'Shift'
const isSpace = key === ' '
const activeNode = !props.isMultiple
? document.querySelector('.clip-item.active' + (isArrowDown ? '+.clip-item' : ''))
: document.querySelector('.clip-item.multi-active' + (isArrowDown ? '+.clip-item' : ''))
if (isArrowUp) {
if (activeIndex.value === 1) window.toTop()
if (activeIndex.value > 0) {
activeIndex.value--
activeNode.previousElementSibling.previousElementSibling.scrollIntoView({
block: 'nearest',
inline: 'nearest'
})
}
} else if (isArrowDown) {
if (activeIndex.value < props.showList.length - 1) {
activeIndex.value++
activeNode.scrollIntoView({ block: 'nearest', inline: 'nearest' })
}
} else if (isCopy) {
if (!props.fullData.data) {
//
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 = []
} else if (isShift) {
if (props.isMultiple) {
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' })
}
ElMessage({
message: '复制成功',
type: 'success'
})
} else {
emit('onMultiCopyExecute', true)
}
})
document.addEventListener('keyup', (e) => {
const { key } = e
const isShift = key === 'Shift'
if (isShift) {
if (props.isMultiple) {
isShiftDown.value = false
}
} else if ((ctrlKey || metaKey || altKey) && isNumber) {
window.copy(props.showList[parseInt(key) - 1])
window.paste()
selectItemList.value = []
} else if (isShift) {
if (props.isMultiple) {
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>

View File

@ -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>