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

 更新时间:2023年09月27日 11:14:10   作者:啥咕啦呛  
有时候给页面内容添加一个关键词搜索功能,如果搜索结果能够像浏览器搜索一样高亮显示,那找起来就会很明显体验会好很多,本文就来介绍一下vue搜索高亮popsearch组件的实现示例,感兴趣的可以了解一下

背景

最近项目中需要制作一个搜索高亮的组件(如下图展示),今天分享一下这个组件功能。希望能抛砖引玉,给大家带来启发。

需求功能

我们需要一个输入框,比如用来搜索网站的所有菜单,这个时候搜索结果高亮显示。

1.搜索关键词筛选;

2.关键词键入筛选;

3.关键词列表高亮;

设计开发

先说一下我的开发环境版本:

  • node: v11.3.0
  • npm: 6.4.1
  • vue:2.5.11

如果不是以上版本也没关系,今日分享的思路,相信你可以自己造出来~

1.先做html排版,简单的用position相对定位来做哈:

<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>

2.给html赋上对应的css(sass):

.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;
      }
    }
  }
}

3.给出变量定义:

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

4.方法高亮定义:

 // 搜索关键词高亮
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>`)
},

本组件只用于学习交流哈!暂时没有定义父级传入参数哈,效果如下:

写在最后

到此这篇关于vue搜索高亮popsearch组件的实现示例的文章就介绍到这了,更多相关vue搜索高亮popsearch 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue自定义表格列的实现过程记录

    vue自定义表格列的实现过程记录

    这篇文章主要给大家介绍了关于vue自定义表格列的相关资料,表格组件在开发中经常会用到,文章通过示例代码介绍的也很详细,需要的朋友可以参考下
    2021-06-06
  • Vue使用虚拟dom进行渲染view的方法

    Vue使用虚拟dom进行渲染view的方法

    这篇文章主要介绍了Vue使用虚拟dom进行渲染view的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 如何把vuejs打包出来的文件整合到springboot里

    如何把vuejs打包出来的文件整合到springboot里

    这篇文章主要介绍了如何把vuejs打包出来的文件整合到springboot里,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • vue父子组件的通信方法(实例详解)

    vue父子组件的通信方法(实例详解)

    这篇文章主要介绍了vue父子组件的通信的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • vue中keep-alive、activated的探讨和使用详解

    vue中keep-alive、activated的探讨和使用详解

    这篇文章主要介绍了vue中keep-alive、activated的探讨和使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue3中addEventListener的用法详解

    vue3中addEventListener的用法详解

    vue3中定义全局指令时,往往会碰到一个问题:事件无法解绑,为什么会这样,因为通常在指令的mounted钩子中绑定事件,事件处理函数也定义在mounted中,本文讲给大家讲讲vue3中addEventListener的妙用,需要的朋友可以参考下
    2023-08-08
  • Vue文件下载进度条的实现过程

    Vue文件下载进度条的实现过程

    这篇文章主要介绍了Vue文件下载进度条的实现原理,通过使用onDownloadProgress方法API获取进度及文件大小等数据,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • VUE组件中的 Drawer 抽屉实现代码

    VUE组件中的 Drawer 抽屉实现代码

    这篇文章主要介绍了VUE组件 之 Drawer 抽屉 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • effect返回runner单测实现示例详解

    effect返回runner单测实现示例详解

    这篇文章主要为大家介绍了effect返回runner单测实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 解决vue组件渲染没更新数据问题

    解决vue组件渲染没更新数据问题

    本文主要介绍了解决vue组件渲染没更新数据问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02

最新评论