study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-08 22:51:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

selectList bugFix

Browse Source
This commit is contained in:
fofolee 2022-04-11 17:03:35 +08:00
parent 1b55377c3c
commit c397f5f02f
1 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/quickcommandUI/SelectList.vue
View File

@ -10,7 +10,7 @@
<q-card> <q-card>
<q-virtual-scroll <q-virtual-scroll
ref="scrollBar" ref="scrollBar"
:style="{ maxHeight: listMaxHeight + 'px' }" :style="{ maxHeight: listMaxHeight + 'px', height: '100vh' }"
:virtual-scroll-slice-size="lazyItemSize" :virtual-scroll-slice-size="lazyItemSize"
:virtual-scroll-item-size="itemHeight" :virtual-scroll-item-size="itemHeight"
@virtual-scroll="scrollEvent" @virtual-scroll="scrollEvent"
@ -45,7 +45,7 @@
</template> </template>
</q-virtual-scroll> </q-virtual-scroll>
<q-btn <q-btn
class="absolute-bottom-right q-ma-md" class="absolute-bottom-right q-ma-xs"
round round
color="primary" color="primary"
icon="close" icon="close"
@ -69,26 +69,32 @@ export default {
mounted() { mounted() {
window.SelectList = this; window.SelectList = this;
this.setSubInput(); this.setSubInput();
this.setUtoolsHeight(this.itemHeight * this.itemSize); this.setUtoolsHeight(this.itemHeight * this.matchedItemsSize);
}, },
computed: { computed: {
itemSize() {
return this.items.length;
},
matchedItems() { matchedItems() {
if (!this.searchWords) return this.items; let matchedItems;
let matchedItems = this.items.filter((x) => { if (!this.searchWords) {
if (typeof x === "string") { matchedItems = this.items;
} else {
matchedItems = this.items.filter((x) => {
if (this.isJson) {
return (
x.title.toLowerCase().includes(this.searchWords.toLowerCase()) ||
x.description
.toLowerCase()
.includes(this.searchWords.toLowerCase())
);
}
return x.toLowerCase().includes(this.searchWords.toLowerCase()); return x.toLowerCase().includes(this.searchWords.toLowerCase());
} });
return ( }
x.title.toLowerCase().includes(this.searchWords.toLowerCase()) ||
x.description.toLowerCase().includes(this.searchWords.toLowerCase())
);
});
this.setUtoolsHeight(this.itemHeight * matchedItems.length); this.setUtoolsHeight(this.itemHeight * matchedItems.length);
return matchedItems; return matchedItems;
}, },
matchedItemsSize() {
return this.matchedItems.length;
},
isJson() { isJson() {
return this.options.optionType === "json"; return this.options.optionType === "json";
}, },
@ -131,6 +137,7 @@ export default {
}, },
onCancelClick() { onCancelClick() {
this.setUtoolsHeight(this.listMaxHeight);
utools.removeSubInput(); utools.removeSubInput();
this.hide(); this.hide();
}, },
@ -143,7 +150,7 @@ export default {
break; break;
case 40: case 40:
this.currentIndex = Math.min( this.currentIndex = Math.min(
this.itemSize - 1, this.matchedItemsSize - 1,
this.currentIndex + 1 this.currentIndex + 1
); );
break; break;
@ -155,9 +162,15 @@ export default {
}, },
scrollEvent(e) { scrollEvent(e) {
//e.index为当前列表第一个可见项的索引
this.currentIndex = this.currentIndex =
// increase代表向下滚动
e.direction === "increase" e.direction === "increase"
? Math.max(e.index, this.currentIndex) ? Math.max(
//当滚动到底时，e.index会突然变成列表最后一个选项的索引
Math.min(this.matchedItems.length - 10, e.index),
this.currentIndex
)
: Math.min(e.index + 9, this.currentIndex); : Math.min(e.index + 9, this.currentIndex);
}, },