Vue实现搜索结果高亮显示关键字

本文实例为大家分享了Vue实现搜索结果高亮显示关键字的具体代码，供大家参考，具体内容如下

1. 需要解决的问题

• 父组件将搜索的字段传到子组件
• 子组件接受数据，正则匹配，并替换字段
  

2. 具体代码

父组件代码

.re_search{
 background:#0096ff;
 line-height:0;
 padding: .2rem;
 svg{
 width:.6rem;
 height:.6rem;
 }
 input[type="search"]{
 display:inline-block;
 height:.9rem;
 width:8rem;
 outline: none;
 border: none;
 border-radius:.45rem;
 background:#f2f2f2;
 box-sizing: border-box;
 padding: 0 .5rem;
 font-size:.4rem;
 }
}

子组件代码

 @baseBlue: #0096ff;
 @com_gray1: #666;
 @com_gray2: #999;
.search-text{
 color: #52250a;
 background: #ffd930;
 font-size: .2rem;
 padding: .02rem;
 border-radius: 2px;
 vertical-align: top;
 margin-right: .04rem;
}


 .com_gray1 {
 color: @com_gray1;
 }

 .com_gray2 {
 color: @com_gray2;
 }

 .com_blue {
 color: @baseBlue;
 }

 
 .one_business {
 background: #fff;

 .business_img {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.4rem;
  float: left;
  img {
  width: 100%;
  height: 100%;
  }
 }
 .business_info {
  float: right;
  width: 7.4rem;
  height: 1.6rem;
  padding: 0.4rem .2rem .4rem 0;
  .business_name {
  font-size: .35rem;
  line-height: .45rem;
  vertical-align: top;
  h3 {
   width: 5rem;
   display: inline-block;
   
   
   
   
   
   
   
   
   
  }
  .bzp {
   width: .3rem;
   height: .3rem;
   font-size: .26rem;
   text-align: center;
   line-height: .3rem;
   display: inline-block;
   color: @com_gray2;
   border: 0.01rem solid #ddd;
   padding: 0.01rem;
   border-radius: 3px;
   i {
   font-style: normal;
   }

  }
  }
  .business_code, .business_other {
  font-size: .25rem;
  margin-top: .3rem;
  line-height: .25rem;
  }

 }
 .code_num {
  svg {
  width: .3rem;
  height: .3rem;
  fill: #ffaa0c;
  }
 }
 .zsd {
  font-size: .25rem;
  height: .35rem;
  line-height: .3rem;
  padding: 0 0.05rem;
  display: inline-block;
  color: @baseBlue;
  background: #fff;
  border: 0.01rem solid @baseBlue;
  box-sizing: border-box;
  border-radius: 3px;
 }
 .fnzs {
  font-size: .25rem;
  height: .35rem;
  padding: 0 0.05rem;
  line-height: .3rem;
  display: inline-block;
  background: @baseBlue;
  color: #fff;
  border: 0.01rem solid @baseBlue;
  box-sizing: border-box;
  border-radius: 3px;
 }
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。