vue 搜索高亮关键字

在一些查询中,我们希望我们查询的关键字,可以在查询内容中高亮出来

this.arr = response.data
   this.caseList = []
   this.arr.forEach(item => {
   this.caseList.push(item)
       console.info(item, '11111111111111')
    })
    this.caseList.map(item => {
       item.context = this.brightKeyword(item.context)
})
brightKeyword(val) {
      let keyword = this.fullSelect
      if (val.indexOf(keyword) !== -1) {
        return val.replace(keyword, `<font color='#ff5134'>${keyword}</font>`)
      } else {
        return val
      }
}

arr是我们从后台获取的数据,我们对arr这个数据进行遍历,将arr数据中的单个数据一个一个取出来,插入我们项目中的caseList中,map方法是返回一个新的数组,在这里的意思是,对caseList数组中context数据进行高亮后,重新生成一个caseList数组

高亮的方法中fullSelect是我们在input框中输入的东西,font标签中的颜色根据自己项目的需要可以更换,其他的照搬就可以啦。这个地方只高亮了内容,当然需要高亮标题或者别的,再map中再加入就可以啦。

这种做法避免了一个弊端是:假如我的关键字在查询过程中没有结果,也可以显示出来,只不过没有高亮效果而已。

但是也存在了一个问题indexOf只会返回第一次与关键字的地方,也就是说假如内容中与关键字匹配的可能有好多处,但是只能高亮第一处

这个问题目前也在寻找方法,找到了再来补充呀~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容