修复搜索高亮功能
This commit is contained in:
parent
1842016b47
commit
1d9cdc7a7e
@ -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;
|
||||||
|
},
|
||||||
|
/**搜索高亮 结束**/
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user