<template>
<div>
<input v-model="text" type="text" placeholder="输入搜索内容" @keyup.enter="searchHandle">
<ul>
<li v-for="(item,index) in data.list" :key="index">
<p v-html="item.title"></p>
</li>
</ul>
</div>
</template>
<script>
import { ref,reactive } from 'vue'
export default {
name:'demo',
setup() {
const text = ref('')
const data = reactive({
list:[],
})
const searchHandle = () => {
if(text.value == ""){
Toast('请输入搜索内容')
}else{
//获取接口数据
getdata({
text:text.value,
}).then(res => {
res.data.forEach(item => {
if(text.value){
//匹配关键字正则
let replaceReg = new RegExp(text.value,'g');
// 高亮替换v-html值
let replaceString = '<span style="color:#EE855F">' + text.value + '</span>';
item.title = item.title.replace(replaceReg, replaceString);
}
data.list.push(item);
})
})
}
}
return{
text,
data,
searchHandle,
}
}
}
</script>
vue3 搜索高亮 列表文字高亮
于 2022-07-19 15:22:26 首次发布