vue搜索高亮popsearch组件的实现示例
作者：啥咕啦呛
有时候给页面内容添加一个关键词搜索功能,如果搜索结果能够像浏览器搜索一样高亮显示,那找起来就会很明显体验会好很多,本文就来介绍一下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 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！