在线直播系统源码，vue实现搜索文字高亮功能
1、在页面中使用v-html渲染
<template>
<div class="box">
<!-- 搜索框 -->
<div class="mySearch">
<van-search
v-model="PopUpSarCh"
show-action
placeholder="请输入搜索关键词"
@search="onSearch"
class="onSearch"
>
<template #action>
<div @click="onSearch">搜索</div>
</template>
</van-search>
</div>
<!-- 搜索结果 -->
<div class="SearchResults">
<div class="SearchContent" v-for="(item, index) in list" :key="index">
<h5 v-html="item.title"></h5>
<div class="myContent" v-html="item.name"></div>
<div class="dotted"></div>
</div>
</div>
</div>
</template>
2、实现高亮的js方法
export default {
data() {
return {
list: [], // 被检索的数组对象，按照需求定义
PopUpSarCh: "",
};
},
methods: {
// 搜索框方法
onSearch() {
//每次搜索前清空
this.list = [];
var arr = []; // 接口查询内容
this.list = arr;
this.changeColor(this.list);//调用搜索词方法
},
// 搜索关键词高亮方法
changeColor(result) {
//result为接口返回的数据
result.map((item, index) => {
if (this.PopUpSarCh) {
let replaceReg = new RegExp(this.PopUpSarCh, "ig");
let replaceString = `<span style="color: #0066FF">${this.PopUpSarCh}</span>`;
result[index].title = item.title.replace(replaceReg, replaceString);
result[index].name = item.name.replace(replaceReg, replaceString);
}
});
this.records = result;
},
},
};
以上就是 在线直播系统源码，vue实现搜索文字高亮功能，更多内容欢迎关注之后的文章