分享中心添加搜索功能

This commit is contained in:
fofolee 2022-04-16 01:25:07 +08:00
parent aa2b20d11c
commit f8f43188bd

View File

@ -90,6 +90,20 @@
> >
<q-pagination v-model="currentPage" :max="maxPages" input /> <q-pagination v-model="currentPage" :max="maxPages" input />
</div> </div>
<div class="absolute" :style="{ left: '25px', bottom: '12px' }">
<q-input
v-model="commandSearchKeyword"
debounce="200"
standout="bg-primary text-white"
dense
@update:model-value="updateSearch"
placeholder="搜索,支持拼音首字母"
>
<template v-slot:prepend>
<q-icon name="search" />
</template>
</q-input>
</div>
<div class="absolute" :style="{ right: '25px', bottom: '12px' }"> <div class="absolute" :style="{ right: '25px', bottom: '12px' }">
<q-btn <q-btn
color="primary" color="primary"
@ -105,6 +119,7 @@
<script> <script>
import commandTypes from "../js/options/commandTypes.js"; import commandTypes from "../js/options/commandTypes.js";
import pinyinMatch from "pinyin-match";
export default { export default {
data() { data() {
@ -112,7 +127,9 @@ export default {
currentPage: 1, currentPage: 1,
commands: [], commands: [],
allCommands: [], allCommands: [],
matchedCommands: [],
perPage: 8, perPage: 8,
commandSearchKeyword: "",
releaseRepo: "fofolee/qcreleases", releaseRepo: "fofolee/qcreleases",
shareRepo: "fofolee/qcshares", shareRepo: "fofolee/qcshares",
commandTypes: commandTypes, commandTypes: commandTypes,
@ -121,14 +138,14 @@ export default {
}, },
computed: { computed: {
maxPages() { maxPages() {
return Math.ceil(this.allCommands.length / this.perPage) || 1; return Math.ceil(this.matchedCommands.length / this.perPage) || 1;
}, },
loading() { loading() {
return this.commands.length === this.currentPageCounts ? false : true; return this.commands.length === this.currentPageCounts ? false : true;
}, },
currentPageCounts() { currentPageCounts() {
return this.currentPage === this.maxPages return this.currentPage === this.maxPages
? this.allCommands.length % this.perPage ? this.matchedCommands.length % this.perPage
: this.perPage; : this.perPage;
}, },
}, },
@ -136,6 +153,7 @@ export default {
window.yuQueClient(`repos/${this.releaseRepo}/docs`).then((res) => { window.yuQueClient(`repos/${this.releaseRepo}/docs`).then((res) => {
console.log(res.data); console.log(res.data);
this.allCommands = res.data.data; this.allCommands = res.data.data;
this.matchedCommands = _.cloneDeep(this.allCommands);
this.fetchCommandDetails(1); this.fetchCommandDetails(1);
}); });
}, },
@ -147,7 +165,7 @@ export default {
methods: { methods: {
fetchCommandDetails(page) { fetchCommandDetails(page) {
this.commands = []; this.commands = [];
this.allCommands this.matchedCommands
.slice((page - 1) * this.perPage, page * this.perPage) .slice((page - 1) * this.perPage, page * this.perPage)
.forEach((item) => { .forEach((item) => {
window window
@ -172,6 +190,14 @@ export default {
this.$utools.putDB(_.cloneDeep(pushData), this.$utools.DBPRE.QC + code); this.$utools.putDB(_.cloneDeep(pushData), this.$utools.DBPRE.QC + code);
quickcommand.showMessageBox("导入成功!可到「来自分享」标签查看"); quickcommand.showMessageBox("导入成功!可到「来自分享」标签查看");
}, },
updateSearch() {
if (!this.commandSearchKeyword) this.matchedCommands = this.allCommands;
else
this.matchedCommands = this.allCommands.filter((x) =>
pinyinMatch.match(x.title, this.commandSearchKeyword)
);
this.fetchCommandDetails(1);
},
}, },
}; };
</script> </script>