vue实现多组关键词对应高亮显示功能


Posted in Javascript onJuly 25, 2019

先上效果图:

 vue实现多组关键词对应高亮显示功能

我们有多组关键词,这里实现了关键词的背景色与匹配值的字体颜色值相同

先拟定一组数据

colors: [
    "#FFB5C5",
    "#EEC900",
    "#D1EEEE",
    "#40E0D0",
    "#FFFF00",
    "#FF7F00",
    "#FF6A6A",
    "#B3EE3A",
    "#9F79EE",
    "#FFC1C1"
   ],
   keywordsdetail: ["好看", "美丽", "wfewf"],
   comments: [
    {
     text: "老师 好看好看222"
    },
    {
     text: "老师美丽11111极了"
    },
    {
     text: "老师太搞笑34234了"
    },
    {
     text: "老师搞笑的不的了"
    },
    {
     text: "老师:ox::beer:wfewf啊"
    }
   ]

我们自定义一些颜色值以及关键词和详情文字

用内联样式的方法设置关键词的不同背景色显示

<span
    v-for="(item,index) in keywordsdetail"
    :key="index"
    class="keyworditem"
    :style="{backgroundColor:colors[index]}"
    @click="showpartkey(index,comments)"
   >{{item}}</span>

下面定义关键词匹配改变字体颜色的方法

changeColor(resultsList, keywords) {
   keywords.map((keyitem, keyindex) => {
    resultsList.map((item, index) => {
     if (keyitem && keyitem.length > 0) {
      // 匹配关键字正则
      let replaceReg = new RegExp(keyitem, "g");
      // 高亮替换v-html值
      let replaceString =
       '<span class="highlight"' +
       ' style="color: ' +
       this.colors[keyindex] +
       ';">' +
       keyitem +
       "</span>";
      resultsList[index].text = item.text.replace(
       replaceReg,
       replaceString
      );
     }
    });
   });

   this.comments = [];
   this.comments = resultsList;
  }

我们主要看这一行

let replaceString = '<span class="highlight"' +' style="color: ' + this.colors[keyindex] + ';">' + keyitem + "</span>";

这里采取了字符串拼接的方法来进行渲染

但如果你写成这样

<span class="highlight">keyitem</span>

然后在css中定义highlight的样式

.highlight {
color:red
}

这样做是不生效的

解释我参考了这位兄弟说的

所以解决方法有以下几种

1.直接去掉css的scoped属性 但是这样做很容易搞乱布局

2.写成以下形式

.aaa >>>.highlight{
color:red
}

3.把样式以字符串拼接的方式插入

这样做的好处是 可以动态设置v-html的样式

总结

以上所述是小编给大家介绍的vue实现多组关键词对应高亮显示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery源码分析-01总体架构分析
Nov 14 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
理解javascript模块化
Mar 28 Javascript
javascript冒泡排序小结
Apr 10 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
微信小程序实现原生步骤条
Jul 25 #Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 #Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 #Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 #Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 #Javascript
微信小程序实现收货地址左滑删除
Nov 18 #Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 #jQuery
You might like
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
JS实现纸牌发牌动画
2021/01/19 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
python 二维数组90度旋转的方法
2019/01/28 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Python configparser模块应用过程解析
2020/08/14 Python
一套Java笔试题
2016/08/20 面试题
小班下学期评语
2014/05/04 职场文书
意向书范本
2014/07/29 职场文书
给老婆的道歉信
2015/01/20 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
python实现A*寻路算法
2021/06/13 Python
python实现MD5进行文件去重的示例代码
2021/07/09 Python