关于收索高亮

直接上代码：

  <!-- 搜索 -->
  <div class="search_header">
    <input type="search" name="search" v-model="searchValue" class="search_input"><span>取消</span>
    <img src="../../assets/搜索.svg" alt="搜索" class="search_icon" />
    <img src="../../assets/清除.svg" alt="清除" class="search_clean" @click="cleanInputValue">
  </div>

    // 搜索高亮
    getSearchLine(value) {
        let titleString = value
        if (!titleString) {
          return '';
        }
        if (this.searchValue && this.searchValue.length > 0) {
          // 匹配关键字正则
          let replaceReg = new RegExp(this.searchValue, 'g');
          // 高亮替换v-html值
          let replaceString = '<span class="search-text">' + this.searchValue + '</span>';
          // 开始替换
          titleString = titleString.replace(replaceReg, replaceString);
        }
        return titleString
    }

考虑到搜索功能都是及时调取查找接口的，小伙伴们可以等去到返回值在做渲染。 添加定时器即可。
效果图：

image.png

右边的叉叉按钮因为是v-model绑定的，添加个清除数据功能就好：

    cleanInputValue() {
      this.searchValue = ''
      const oInput = document.querySelector('.search_input')
      oInput.focus()
    },