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

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

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

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

​

2、实现高亮的js方法

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

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