网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )

本文实例为大家分享了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>
 <!--&lt;!&ndash; 撑开Fixednav挡住的位置 &ndash;&gt;-->
 <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="/UploadFiles/2021-04-02/guozhao.png">

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

上一篇:Vue3.0结合bootstrap创建多页面应用
下一篇:Vue2.x通用编辑组件的封装及应用详解
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap