Vue实现搜索结果高亮显示关键字
更新时间:2019年05月28日 14:22:22 作者:Schon_zh
这篇文章主要为大家详细介绍了Vue实现搜索结果高亮显示关键字,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
详解element-ui级联菜单(城市三级联动菜单)和回显问题
这篇文章主要介绍了详解element-ui级联菜单(城市三级联动菜单)和回显问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-10-10
最新评论