zoukankan      html  css  js  c++  java
  • 基于vue实现搜索高亮关键字

    有一个需求是在已有列表中搜索关键词,然后在列表中展示含有相关关键字的数据项并且对关键字进行高亮显示,所以该需求需要解决的就两个问题:

    1.搜索关键词过滤列表数据

    2.每个列表高亮关键字

    ps: 此问题基于数组对象,其他数据类型也可参考此思路。

    关键词搜索:过滤数据很简单,无非就是监听search,对源数据过滤即可,贴一下代码:

     1 const search = this.search
     2 if (search) {
     3     this.showdata = this.copyshowdata.filter(data => {
     4          return Object.keys(data).some(key => {
     5              return String(data[key]).indexOf(search) > -1
     6         })
     7     })       
     8 } else {
     9     this.showdata = this.copyshowdata
    10 }        

    showdata是展示在页面的,copyshowdata是showdata副本,还原列表时使用的,对其不做任何处理。

    上面是使用watch监听search值变化处理的,也可以使用computed属性计算showdata。


    高亮关键字:思路是遍历showdata,对每一项item的值进行正则匹配(也可匹配指定项),使用<span class="highlights-text"></span> 替换掉search

     1 highlights () {
     2         const search = this.search
     3         this.showdata = this.showdata.map(item => {
     4           for (let key in item) {
     5             if (key === 'Issuecontent') {
     6               let replaceReg = new RegExp(search, 'g')// 匹配关键字正则
     7               let replaceString = '<span class="highlights-text">' + search + '</span>' // 高亮替换v-html值
     8               item[key + '-highlights'] = item[key].replace(replaceReg, replaceString) // 开始替换
     9             }
    10           }
    11           return item
    12         })
    13       }

    页面上则使用v-html=“item[key-highlights]”渲染

    渲染之后还需要对样式进行单独处理,不能加在父类上面,而且scope要去掉,否则样式不会生效。

    1 <style lang="scss">
    2   .highlights-text {
    3     color: #ff5134;
    4   }
    5 </style>

    贴一张效果图:

  • 相关阅读:
    [那些你所不知道的鬼畜写法]数据结构小探
    索引
    数据类型
    存储引擎
    事务
    视图、触发器、存储过程、自定义函数
    约束
    数据库介绍
    线程基础、线程池
    操作系统基础
  • 原文地址:https://www.cnblogs.com/licurry/p/11589985.html
Copyright © 2011-2022 走看看