From 9cd42c560e90f6a7d1d33da3b8ad4299a9d0735d Mon Sep 17 00:00:00 2001 From: wangyuan198 Date: Mon, 25 Apr 2022 14:07:32 +0800 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E8=AF=8D=E5=9C=A8=E6=96=87=E4=B8=AD=E9=AB=98=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/SearchBox.vue | 34 ++++++++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/components/SearchBox.vue b/components/SearchBox.vue index 2fcc7ab..23ae801 100644 --- a/components/SearchBox.vue +++ b/components/SearchBox.vue @@ -61,6 +61,8 @@ export default { focusIndex: 0, placeholder: undefined, suggestions: null, + highlightWord:'', + lastWord:'' } }, computed: { @@ -84,9 +86,30 @@ export default { }, }, watch: { - query() { + query(val) { + this.getSuggestions() + if(!this.suggestions?.length && this.lastWord){ + this.$nextTick(()=>{ + let target = document.querySelector('.theme-default-content.content__default').innerHTML + document.querySelector('.theme-default-content.content__default').innerHTML = target.replace(`${this.lastWord}`,this.lastWord) + }) + } }, + $route(to,from){ + if(this.suggestions?.length && this.highlightWord){ + let val = this.highlightWord + const reg = val?new RegExp(val,'g'):'' + this.$nextTick(()=>{ + let target = document.querySelector('.theme-default-content.content__default').innerHTML + if( val&® && target) { + document.querySelector('.theme-default-content.content__default').innerHTML = target.replace(val,`${val}`) + this.lastWord = val // 记录上一次查询词语 + } + }); + } + } + }, /* global OPTIONS */ mounted() { @@ -175,6 +198,8 @@ export default { } }, go(i) { + // 第i个匹配 + this.highlightWord = '' if (!this.showSuggestions) { return } @@ -186,7 +211,10 @@ export default { window.open(this.suggestions[i].path + this.suggestions[i].slug, '_blank') } else { this.$router.push(this.suggestions[i].path + this.suggestions[i].slug) - this.query = '' + const val = this.suggestions[i]?.contentDisplay?.highlightedContent + this.highlightWord=val || '' + + // this.query = '' this.focusIndex = 0 this.focused = false @@ -231,6 +259,8 @@ function highlight(str, strHighlight) {