vue 关键词搜索高亮显示
<input class="uni-input" @input="searchText" placeholder="请输入搜索内容" />
searchText(e){
console.log(e.target.value)
if(e.target.value!=''){
this.$request('/Api/xxxxx', {
keyword:e.target.value
}).then(res => {
// 打印调用成功回调
// console.log(res)
this.changeColor(e.target.value,res.list)
})
}
},
changeColor (keyWords,resultsList) {
resultsList.map((item, index) => {
if (keyWords && keyWords.length > 0) {
// 匹配关键字正则
let replaceReg = new RegExp(keyWords, 'g');
// 高亮替换v-html值，渲染时用<rich-text :nodes="item.title"></rich-text>
let replaceString ='<span class="search-text">' + keyWords + '</span>'
resultsList[index].title = item.title.replace(replaceReg,replaceString)
}
});
this.results = [];
this.list = resultsList;
console.log(this.list);
},
