修复搜索高亮功能

This commit is contained in:
WangHao 2020-11-14 16:07:03 +08:00
parent 1842016b47
commit 1d9cdc7a7e
2 changed files with 77 additions and 66 deletions

View File

@ -4,12 +4,16 @@
<div v-for="bm in bookmarkList" class="bookmark" @click="winurl(bm.noteId,bm.tiymceUeditor,bm.bookmarkId,bm.url)"> <div v-for="bm in bookmarkList" class="bookmark" @click="winurl(bm.noteId,bm.tiymceUeditor,bm.bookmarkId,bm.url)">
<div class="bookmark-item"> <div class="bookmark-item">
<span class="bookmark-title" v-if="highlighted" v-html="highLight(bm.title,sousuo)"/>
<span class="bookmark-title" >{{bm.title}}</span> <span class="bookmark-title" v-if="!highlighted">{{bm.title}}</span>
<div class="bookmark-time" v-if="noteTime">{{bm.createTime|changeTime}}</div> <div class="bookmark-time" v-if="noteTime">{{bm.createTime|changeTime}}</div>
</div> </div>
<div class="bookmark-description" v-if="isdescription"> <div class="bookmark-description" v-if="isdescription">
<span >{{bm.description}}</span>
<span v-if="highlighted" v-html="highLight(bm.description,sousuo)"></span>
<span v-if="!highlighted">{{bm.description}}</span>
</div> </div>
<div class="info-wrap" v-if="isBookmarkIcon"> <div class="info-wrap" v-if="isBookmarkIcon">
<div class="info"> <div class="info">
@ -43,6 +47,8 @@
props: { props: {
bookmarkList: Array, bookmarkList: Array,
property: null, property: null,
highlighted: null,//
sousuo:null
}, },
data: function () { data: function () {
return { return {
@ -98,7 +104,60 @@
} }
} },
/**搜索高亮 开始**/
highLight(item, highLight) {
return this.highLightTableMsg(item, highLight)
},
highLightTableMsg(msg, highLightStr) {
if (msg == null) {
msg = ''
}
if (highLightStr == null) {
highLightStr = ''
}
if (msg instanceof Object) {
msg = JSON.stringify(msg)
}
if (highLightStr instanceof Object) {
highLightStr = JSON.stringify(highLightStr)
}
if (!(msg instanceof String)) {
msg = msg.toString()
}
if (!(highLightStr instanceof String)) {
highLightStr = highLightStr.toString()
}
var htmlStr = ''
if (highLightStr.length > 0) {
if (msg.toLowerCase().indexOf(highLightStr) !== -1) {
assemblyStr(msg, highLightStr)
} else {
htmlStr = '<span>' + msg + '</span>'
}
} else {
htmlStr = '<span>' + msg + '</span>'
}
function assemblyStr(msgAssembly, highLightAssembly) {
var isend=highLightAssembly.length;
if (msgAssembly.toLowerCase().indexOf(highLightAssembly) !== -1) {
var length = highLightAssembly.length
var start = msgAssembly.toLowerCase().indexOf(highLightAssembly)
htmlStr = htmlStr + '<span>' + msgAssembly.substring(0, start) + '</span>' + '<span style="color:red;">' + msgAssembly.substring(start, start+isend) + '</span>'
msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)
assemblyStr(msgAssembly, highLightAssembly)
} else {
htmlStr = htmlStr + '<span>' + msgAssembly + '</span>'
}
}
return htmlStr;
},
/**搜索高亮 结束**/
} }
} }

View File

@ -119,7 +119,7 @@
<div v-if="queryParams.sousuo!=''" class="sousuoContent"> <div v-if="queryParams.sousuo!=''" class="sousuoContent">
<i class="el-icon-success"></i> <i class="el-icon-success"></i>
<!-- <span> 当前搜索的内容是:{{queryParams.sousuo}}</span>--> <!-- <span> 当前搜索的内容是:{{queryParams.sousuo}}</span>-->
<span> 共为您找到约{{total}}个结果</span> <span> "{{sousuo}}"共为您找到约{{total}}个结果</span>
</div> </div>
<div class="nullbookmark" v-if="showimg"> <div class="nullbookmark" v-if="showimg">
@ -199,7 +199,7 @@
<div class="bookmarklist" :style="datalist" infinite-scroll-distance="10" v-loading="loading" v-if="showbookmark" <div class="bookmarklist" :style="datalist" infinite-scroll-distance="10" v-loading="loading" v-if="showbookmark"
v-infinite-scroll="load" v-infinite-scroll="load"
infinite-scroll-disabled="disabled" style="overflow:auto;" infinite-scroll-immediate="false"> infinite-scroll-disabled="disabled" style="overflow:auto;" infinite-scroll-immediate="false">
<BookmarkOne @on-windowurl="windowurl" :key="property" :property="property" :listloading="listloading" :loading="loading" :bookmarkList="bookmarkList"></BookmarkOne> <BookmarkOne @on-windowurl="windowurl" :key="property" :property="property" :highlighted="highlighted" :sousuo="sousuo" :listloading="listloading" :loading="loading" :bookmarkList="bookmarkList"></BookmarkOne>
<p v-if="listloading" class="listhint"><i class="el-icon-loading"></i>加载中...</p> <p v-if="listloading" class="listhint"><i class="el-icon-loading"></i>加载中...</p>
<p v-if="listnoMore&&!showimg" class="listhint">没有更多了</p> <p v-if="listnoMore&&!showimg" class="listhint">没有更多了</p>
@ -486,6 +486,7 @@
// //
if (sousuo != null && sousuo != undefined && sousuo != '') { if (sousuo != null && sousuo != undefined && sousuo != '') {
this.queryParams.sousuo = sousuo; this.queryParams.sousuo = sousuo;
this.sousuo=sousuo
} }
@ -505,7 +506,7 @@
// //
window.addEventListener('resize', this.getHeight); window.addEventListener('resize', this.getHeight);
this.getHeight() this.getHeight()
}, },
mounted() { mounted() {
@ -836,6 +837,7 @@
}, },
/**查询书签 滚动加载分页拼接*/ /**查询书签 滚动加载分页拼接*/
getListConcat(){ getListConcat(){
var that=this;
this.loading = true; this.loading = true;
selectBymenuIdUserID(this.queryParams).then(response => { selectBymenuIdUserID(this.queryParams).then(response => {
if (response.code == 200) { if (response.code == 200) {
@ -908,67 +910,17 @@
window.open(this.gourl); window.open(this.gourl);
}, },
/**搜索高亮 开始**/
highLight(item, highLight) {
return this.highLightTableMsg(item, highLight)
},
highLightTableMsg(msg, highLightStr) {
if (msg == null) {
msg = ''
}
if (highLightStr == null) {
highLightStr = ''
}
if (msg instanceof Object) {
msg = JSON.stringify(msg)
}
if (highLightStr instanceof Object) {
highLightStr = JSON.stringify(highLightStr)
}
if (!(msg instanceof String)) {
msg = msg.toString()
}
if (!(highLightStr instanceof String)) {
highLightStr = highLightStr.toString()
}
var htmlStr = ''
if (highLightStr.length > 0) {
if (msg.indexOf(highLightStr) !== -1) {
assemblyStr(msg, highLightStr)
} else {
htmlStr = '<span>' + msg + '</span>'
}
} else {
htmlStr = '<span>' + msg + '</span>'
}
function assemblyStr(msgAssembly, highLightAssembly) {
if (msgAssembly.indexOf(highLightAssembly) !== -1) {
var length = highLightAssembly.length
// alert(length)
var start = msgAssembly.indexOf(highLightAssembly)
htmlStr = htmlStr + '<span>' + msgAssembly.substring(0, start) + '</span>' + '<span style="color:red;">' + highLightAssembly + '</span>'
msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)
assemblyStr(msgAssembly, highLightAssembly)
} else {
htmlStr = htmlStr + '<span>' + msgAssembly + '</span>'
}
}
return htmlStr;
},
/**搜索高亮 结束**/
/**搜索功能**/ /**搜索功能**/
gosousuo() { gosousuo() {
var that = this; var that = this;
// that.$router.push({ that.$router.push({
// path: "/content", path: "/content",
// query: { query: {
// sousuo: this.sousuo, sousuo: this.sousuo,
// t:Date.now(), t:Date.now(),
// } }
// }) })
}, },
/** 查询部门下拉树结构 */ /** 查询部门下拉树结构 */
@ -1352,7 +1304,7 @@
.bookmark { .bookmark {
height: 70px; height: 70px;
/*border-bottom: 1px solid #D9D9D9;*/ /*border-bottom: 1px solid #D9D9D9;*/
} }
.bookmark2 { .bookmark2 {
@ -1478,9 +1430,9 @@
} }
.sousou-left { .sousou-left {
margin-left: 12px; margin-left: 12px;
} }
.isBookmarkAside{ .isBookmarkAside{
padding: 0px; padding: 0px;