本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
vue搜索结果高亮显示关键字 vue高亮显示关键字 vue高亮显示搜索关键字