📒 背景
最近项目中需要制作一个搜索高亮的组件（如下图展示），今天分享一下这个组件功能。希望能抛砖引玉，给大家带来启发。
🔍需求功能
我们需要一个输入框，比如用来搜索网站的所有菜单，这个时候搜索结果高亮显示。
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>`)
},本组件只用于学习交流哈！暂时没有定义父级传入参数哈，效果如下：
🚀写在最后
如果本文中有bug、逻辑错误，或者您有更好的优化方案欢迎评论联系我哦！~关注我持续分享日常工作中的组件设计和学习分享，一起进步加油！