效果图
html部分
<div class="down">
<ul>
<li
v-for="(item, index) in searchList"
:key="index"
@click.stop="handleSearchList(item)"
>
{
{ item }}
</li>
<li v-show="searchResult" style="text-align: center">暂无搜索结果</li>
</ul>
</div>
css部分
.down {
ul {
width: 298px;
max-height: 100px;
overflow-y: scroll;
margin: 0;
padding: 0 12px;
list-style: none;
&::-webkit-scrollbar {
/*滚动条整体样式*/
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
background: #1890ff;
box-shadow: inset 0 0 5px rgb(59, 193, 230);
}
//滚动条底层颜色!
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ededed;
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}
li {
overflow: hidden; // 溢出隐藏
white-space: nowrap; // 强制一行
text-overflow: ellipsis; // 文字溢出显示省略号
cursor: pointer;
&:hover {
color: rgb(0, 81, 255);
}
}
}
}