当input组件输入搜索关键字后,匹配当前输入的关键字处理高亮显示
效果如下图↓
Ajax请求回来数据之后,遍历数据,通过字符串的 replace 方法,将关键词包裹标签,加上高亮样式,替换对应字符串
list.forEach(str => item.content = str.replace(this.keyword, `<text style='color:#5E05BB;font-weight:bold'>${
this.keyword}</text>`));
页面渲染时需要注意,因为替换后包含有html标签,所以需要用渲染富文本的形式去渲染, 比如 u-parse(uni-app) 组件
如果觉得有用随手点个赞吧,谢谢
关注我,不定时分享技术干货~
扫二维码关注公众号