在线直播系统源码，vue实现搜索文字高亮功能

在线直播系统源码，vue实现搜索文字高亮功能

1、在页面中使用v-html渲染

 

1

<template><br>  <div class="box"><br>    <!-- 搜索框 --><br>    <div class="mySearch"><br>      <van-search<br>        v-model="PopUpSarCh"<br>        show-action<br>        placeholder="请输入搜索关键词"<br>        @search="onSearch"<br>        class="onSearch"<br>      ><br>        <template #action><br>          <div @click="onSearch">搜索</div><br>        </template><br>      </van-search><br>    </div><br>   <br>    <!-- 搜索结果 --><br>    <div class="SearchResults"><br>      <div class="SearchContent" v-for="(item, index) in list" :key="index"><br>        <h5 v-html="item.title"></h5><br>        <div class="myContent" v-html="item.name"></div><br>        <div class="dotted"></div><br>      </div><br>    </div><br>   <br>  </div><br></template>

​

2、实现高亮的js方法

 

1

export default {<br>  data() {<br>    return {<br>      list: [], // 被检索的数组对象，按照需求定义<br>      PopUpSarCh: "",<br>    };<br>  },<br>  methods: {<br>    // 搜索框方法<br>    onSearch() {<br>      //每次搜索前清空<br>      this.list = [];<br>      var arr = []; // 接口查询内容<br>      this.list = arr;<br>      this.changeColor(this.list);//调用搜索词方法<br>    },<br>    // 搜索关键词高亮方法<br>    changeColor(result) {<br>      //result为接口返回的数据<br>      result.map((item, index) => {<br>        if (this.PopUpSarCh) {<br>          let replaceReg = new RegExp(this.PopUpSarCh, "ig");<br>          let replaceString = `<span style="color: #0066FF">${this.PopUpSarCh}</span>`;<br>          result[index].title = item.title.replace(replaceReg, replaceString);<br>          result[index].name = item.name.replace(replaceReg, replaceString);<br>        }<br>      });<br>      this.records = result;<br>    },<br>  },<br>};

 

以上就是 在线直播系统源码，vue实现搜索文字高亮功能，更多内容欢迎关注之后的文章