优化滚轮和按键事件

This commit is contained in:
fofolee 2022-05-02 22:53:05 +08:00
parent 93c43b4772
commit b4b4b7f390

View File

@ -1,11 +1,10 @@
<template>
<q-card @keydown="keyEvent">
<q-card>
<q-virtual-scroll
ref="scrollBar"
:style="{ maxHeight: listMaxHeight + 'px', height: '100vh' }"
:virtual-scroll-slice-size="lazyItemSize"
:virtual-scroll-item-size="itemHeight"
@virtual-scroll="scrollEvent"
:items="matchedItems"
>
<template v-slot="{ item, index }">
@ -63,10 +62,12 @@ export default {
itemHeight: 50,
lazyItemSize: 50,
searchWords: "",
lastTimeStamp: null,
};
},
mounted() {
this.options.options.enableSearch && this.setSubInput();
this.addListeners();
this.setUtoolsHeight(this.itemHeight * this.matchedItemsSize);
},
unmounted() {
@ -115,36 +116,24 @@ export default {
this.options.options.closeOnSelect && this.hide();
},
keyEvent(e) {
changeItemIndex(e) {
e.preventDefault();
switch (e.keyCode) {
case 38:
if (e.keyCode === 13) return this.clickOK();
if (e.timeStamp - this.lastTimeStamp < 50) return;
let value = e.deltaY ? e.deltaY : e.keyCode - 39;
switch (value > 0) {
case false:
this.currentIndex = Math.max(0, this.currentIndex - 1);
break;
case 40:
case true:
this.currentIndex = Math.min(
this.matchedItemsSize - 1,
this.currentIndex + 1
);
break;
case 13:
this.clickOK();
return;
}
this.$refs.scrollBar.scrollTo(this.currentIndex);
},
scrollEvent(e) {
//e.index
this.currentIndex =
// increase
e.direction === "increase"
? Math.max(
//e.index
Math.min(this.matchedItems.length - 10, e.index),
this.currentIndex
)
: Math.min(e.index + 9, this.currentIndex);
this.lastTimeStamp = e.timeStamp;
},
setSubInput() {
@ -159,8 +148,19 @@ export default {
clear() {
utools.removeSubInput();
document.removeEventListener("keydown", this.changeItemIndex);
document.removeEventListener("mousewheel", this.changeItemIndex, {
passive: false,
});
this.setUtoolsHeight(this.listMaxHeight);
},
addListeners() {
document.addEventListener("keydown", this.changeItemIndex);
document.addEventListener("mousewheel", this.changeItemIndex, {
passive: false,
});
},
},
};
</script>