关键 名字的显示/下拉框显示用到v-html

下拉框

      <el-autocomplete ref="search" v-model="key" :fetch-suggestions="querySearch" :trigger-on-focus="false" class="input-button" :class="{ trans: isTrans }" :popper-append-to-body="false" @select="handleSelect" @keyup.native="isTrans = true" @keyup.enter.native="search">
        <ul slot-scope="{ item }">
          <li>
            <span v-html="brightenKeyword(item.value, key)"></span>
          </li>
        </ul>
        <el-button slot="append" :disabled="searching" type="primary" @click="search"><span style="margin-right: 10px">搜</span>索</el-button>
      </el-autocomplete>

高亮方法

    //下拉框关键字高亮
    brightenKeyword(val, keyword) {
      const Reg = new RegExp(keyword, 'g')
      if (val) {
        return val.replace(
          Reg,
          `<span style="color: rgba(68,139,255,1)">${keyword}</span>`
        )
      }
    },

搜索内容高亮

在调用后台接口得到搜索数据时，把数据里的Name字段替换掉

    //视频里关键字高亮
    match(arr) {
      let str = this.key
      str = str
        .replace(/\+/g, '\\+')
        .replace(/\./g, '\\.')
        .replace(/\(/g, '\\(')
        .replace(/\)/g, '\\)')
        .replace(/\^/g, '\\^')
        .replace(/\|/g, '\\|')
        .replace(/\$/g, '\\$')

      let reg = `/${str}/g`

      for (let i = 0; i < arr.length; i++) {
        let item = arr[i]
        item.lightName = item.Name.replace(
          eval(reg),
          `<span style='color:rgba(44,91,232,1)' >${this.key}</span>`
        )
      }
    },