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


Posted in Javascript onMay 28, 2019

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

1. 需要解决的问题

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

2. 具体代码

父组件代码

<template>
 <div>
 <div v-if="showMe">
 <div class="re_search">
  <svg @click="$router.go(-1)">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-left.6f6409e" rel="external nofollow" ></use>
  </svg>
  <input type="search" v-model="search_text" class="v-md" placeholder="请输入商品名称" @keydown.enter="search_method">
 </div>
 <OneBusiness v-for="(item, n) in search_res" :key="n" :item="item" :search_text="search_text"></OneBusiness>
 </div>
 <!--<!– 撑开Fixednav挡住的位置 –>-->
 <div class="space"></div>
 <!-- 固定导航栏 -->
 </div>
</template>

<script>
import { mapGetters } from 'vuex';
import OneBusiness from './small_components/One_business';
import {getSearchData} from 'src/service/getData'


export default {
 name: 'search',
 data () {
 return {
  showMe: false,
  search_text: '', // 搜索框内容
  search_res: [] // 搜索结果
 };
 },
 mounted () {
 this.$store.dispatch('setLoading', true);
 // 模拟加载
 var time = Math.floor(Math.random() * 2000);
 console.log('模拟加载用时' + time);
 setTimeout(() => {
  this.$store.dispatch('setLoading', false);
  this.showMe = true;
 }, time);
 this.search_method();
 },
 computed: {
 ...mapGetters([
  'getFalseBussinessbrief' // 商家简略信息
 ])
 },
 methods: {
 async search_method () {

  var mainWord = this.$route.params.keyword;
  if (this.search_text !== '' && this.search_text !== this.$route.params.keyword) {
  mainWord = this.search_text;
  }
  this.search_text = mainWord;
  this.search_res = (await getSearchData(this.search_text)).obj.results;
  console.log(this.search_res);
 }
 },
 components: {
 OneBusiness
 }
};
</script>

<style lang="less" scoped>
.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;
 }
}
</style>

子组件代码

<template>
 <!-- 列表单个商家 -->
 <section class="tj_business" >
 <section class="one_business clear">
  <div class="business_img">
  <img src="../../images/guozhao.png" alt="">
  </div>
  <div class="business_info">
  <section class="business_name clear">
   <router-link :to="'/business/' + item.classNum">
   <h3 class="fl ell"><span v-if="item.className">大类</span>第{{item.classNum}}类{{ item.className }}</h3>
   </router-link>
   <div class="name_icon fr">
   <div class="code_num fr">
    <svg @click="add_cart(item.id)" style=" width: .5rem; height: .5rem;">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus" rel="external nofollow" ></use>
    </svg>
   </div>
   </div>
  </section>
  <section class="business_code clear">
   <div class="code_num fl">
   <!--<svg class="v-md">-->
    <!--<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star" rel="external nofollow" ></use>-->
   <!--</svg>-->
   <span class="v-md">【{{item.parentNum}}组】{{ item.groupName }}</span>
   </div>
   <div class="code_icon fr">
   </div>
  </section>
  <section class="business_other clear">
   <div class="other_price fl">
   <span class="com_gray1" v-html="ruleTitle"></span>
   <span>/</span>
   <span class="com_gray1">{{ item.number }}</span>
   </div>
   <div class="other_dis fr">
   </div>
  </section>
  </div>
 </section>

 </section>

</template>

<script>
 import {
 addMyshopcart,
 } from 'src/service/getData'

 export default {
 name: 'one_business',
 props: {
  search_text:String,
  item:{}
 },
 data () {
  return {
  msg: '1'

  };
 },
 mounted () {

 },
 computed: {
  isLogin () {
  return this.$store.getters.getLogin;
  },
  ruleTitle() {
  let titleString = this.item.gname;
  if (!titleString) {
   return '';
  }
  if (this.search_text && this.search_text.length > 0) {
   // 匹配关键字正则
   let replaceReg = new RegExp(this.search_text, 'g');
   // 高亮替换v-html值
   let replaceString = '<span class="search-text">' + this.search_text + '</span>';
   // 开始替换
   titleString = titleString.replace(replaceReg, replaceString);
  }
  return titleString;
  }
 },
 methods: {
  async add_cart(id){
  if (!this.isLogin) {
   this.$router.replace('/login');
  } else {
   var userId = this.$store.getters.getuname;
   var result = await addMyshopcart(id, userId)
   console.log(result.resMsg)

   if (result.res === 1) {
   this.$router.replace('/ShopCart/' + userId);
   } else {
   alert(result.resMsg)
   }
  }
  }
 }

 };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
 @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;
   /*span {*/
   /*color: #52250a;*/
   /*background: #ffd930;*/
   /*font-size: .2rem;*/
   /*padding: .02rem;*/
   /*border-radius: 2px;*/
   /*vertical-align: top;*/
   /*margin-right: .04rem;*/
   /*}*/
  }
  .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;
 }
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
js控制input输入字符解析
Dec 27 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 #Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 #jQuery
小程序多图列表实现性能优化的方法步骤
May 28 #Javascript
实例详解带参数的 npm script
May 28 #Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 #jQuery
Vue2.x通用条件搜索组件的封装及应用详解
May 28 #Javascript
jquery操作select常见方法大全【7种情况】
May 28 #jQuery
You might like
我常用的几个类
2006/10/09 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
基于Python的关键字监控及告警
2017/07/06 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
python打开windows应用程序的实例
2019/06/28 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
运动会班级口号
2014/06/09 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
小学教师师德整改措施
2014/09/29 职场文书
南京导游词
2015/02/03 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
工作计划范文之财务管理
2019/08/09 职场文书