搜索结果文字高亮显示
-实际项目中的文字高亮 自己实现的方法,本来可以使用vue过滤器 我懒就写了个方法 直接上代码
<div class="name">
<span
class="txt"
@click="goAderHome(item.ader_id)"
v-html="highLight(item.short_name,lightval)"
>{{}}</span>
</div>
- 上面highLifht是方法
//高亮方法
highLight: function(msg, highLightStr) {
//msg 是需要高亮的句子 highLightStr 是高亮关键字
let arr = highLightStr.split("");
arr = Array.from(new Set(arr)); //es6 数组去重
let arrmsg = msg.split(""); //句子变成数组
for (let j = 0; j < arrmsg.length; j++) {
//对句子数组进行循环
for (let item of arr) {
if (
arrmsg[j] === item.toUpperCase() ||
arrmsg[j] === item.toLowerCase()
) {
arrmsg[j] =
"<span style='color: #01CAF8;'>" + arrmsg[j] + "</span>";
}
}
}
return arrmsg.join(""); //数组转字符串
},
估计都会 就是基础的方法 具体看注释