html：
<!-- 搜索框 -->
<view class="search-box">
<view class="search-input">
<u--input clearable="true" v-model="searchValue" @confirm="searchClick()" border="none" fontSize="15px"
color="#333" shape="circle" placeholder="请输入关键词搜索" prefixIcon="search"
prefixIconStyle="font-size: 26px;color: #B2B2B2">
</u--input>
<view class="searchbtn" @click="searchClick(searchValue)">搜索</view>
</view>
</view>List: (Remember to use v-html where you want to change the color)
<view class="content-box-item" v-for="(item,index) in pageList" :key="index" @click="toDetile(item.id)">
<!-- 内容图片 2张图片显示样式-->
<view class="content-box-item-imges-class2" v-if="item.contentFile && item.contentFile.length==2">
<!-- 内容标题 -->
<view class="content-box-item-title" v-html="item.depict">
</view>
<view class="list-img2">
<view class="list-img2-box" v-for="(fItem,fIndex) in item.contentFile" :key="fIndex">
<image class="list-img2-img" v-if="isImage(fItem.fileType)" :showMenuByLongpress="false"
:src="fItem.url" mode="aspectFill">
</image>
<video class="list-img2-img" :src="fItem.url" v-else controls></video>
</view>
</view>
</view>
</view>data defines the data:
data() {
return {
searchValue: '', //搜索关键字
searchList: [{
auditTime: null,
browse: 4,
collect: 1,
content: '呵呵哈哈哈或',
contentFile: [{
fileType: 'jpg',
url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
},
{
fileType: 'png',
url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
},
{
fileType: 'png',
url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
}
],
createId: null,
createTime: "2022-04-21 15:49:59",
depict: "哈哈呢绒的合法还是进来快捷方式了 ",
enable: null,
id: "1517048004973060097",
isCollect: null,
label: null,
reason: null,
recommend: null,
state: null,
tagsCode: null,
title: "测试",
updateId: null,
updateTime: null,
},
{
auditTime: null,
browse: 4,
collect: 1,
content: '呵呵哈哈哈或',
contentFile: [{
fileType: 'jpg',
url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
},
{
fileType: 'png',
url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
},
],
createId: null,
createTime: "2022-04-21 15:49:59",
depict: "呢绒的合法还 哈哈是进来快捷方式了 ",
enable: null,
id: "1517048004973060097",
isCollect: null,
label: null,
reason: null,
recommend: null,
state: null,
tagsCode: null,
title: "测试",
updateId: null,
updateTime: null,
},
{
auditTime: null,
browse: 4,
collect: 1,
content: '呵呵哈哈哈或',
contentFile: [{
fileType: 'jpg',
url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
},
],
createId: null,
createTime: "2022-04-21 15:49:59",
depict: "呢绒的合法还是进来快捷方式了哈哈哈 ",
enable: null,
id: "1517048004973060097",
isCollect: null,
label: null,
reason: null,
recommend: null,
state: null,
tagsCode: null,
title: "测试",
updateId: null,
updateTime: null,
}
], //搜索列表
}
},
Method body operation: methods
methods: {
searchClick(e) {
//searchList为从vuex穿过来的对话内容；
// searchValue为搜索框中的value
let searchValue = e
let searchList = []
// 遍历所有对话文本内容
for (let i = 0; i < this.searchList.length; i++) {
// 当对话内容中有包含搜索框中的字符串时
if (this.searchList[i].depict.indexOf(searchValue) >= 0) {
this.searchList[i].depict = this.searchList[i].depict.replaceAll(searchValue,
"<font style='color:red'>" + searchValue + "</font>") //替换所有搜索找到的关键字 更换颜色
searchList.push(this.searchList[i])
}
}
this.searchList = searchList
},
}