vue搜索高亮popsearch组件的实现示例

<div class='popcover'>
   <input type="text" class="z-input" placeholder="请输入" v-model="data">
   <div class="popcoverbox">
      <p v-if="!list.filter(one=>one.name.includes(data)).length"> 无数据 </p>
      <ul>
        <li v-for="one in list.filter(one=>one.name.includes(data))" :key="one.id" v-html="searchNamefilter(one.name)" ></li>
      </ul>
   </div>
 </div>

.z-input{
  outline: none;
  line-height: 30px;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 10px;
  &:focus{
    border-color: #1676ff;
    + .popcoverbox{
      display: block;
    }
  }
}
.popcover{
  position: relative;
}
.popcoverbox{
  display: none;
  position: absolute;
  top: 32px;
  left: 0;
  min-width: 200px;
  min-height: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: 3px 4px 3px #eee;
  background: #fff;
  line-height: 30px;
  padding: 0;
  p{
    color: #999;
    padding: 0;
    margin: 0;
    border: 0;
    text-indent: 10px;
  }
  ul{
    padding: 0;
    margin: 0;
    border: 0;
    li{
      margin: 0;
      border: 0;
      box-sizing: border-box;
      width: 100%;
      text-indent: 10px;
      cursor: pointer;
      &:hover{
        color: #333;
        background-color: #eee;
      }
      &.hover{
        color: #1676ff;
        background-color: #e8f1ff;
      }
    }
  }
}

data:"",
list:[
  {
    id: 0,
    name:'张三'
  },
  {
    id: 1,
    name:'赵四'
  },
  {
    id: 2,
    name:'周四'
  },
  {
    id: 3,
    name:'郑三'
  },
]
}

 // 搜索关键词高亮
searchNamefilter(name){
  if(!name)return
  let key = this.data;
  const reg = new RegExp(key, 'ig');
  return name.replace(reg, `<span style="color:red">${key}</span>`)
},