antd-vue : 修改a-select下拉框的滚动条样式
通过给 a-select 标签设置 dropdown-class-name 属性,添加一个 class 类,然后修改这个类的样式
<a-select
v-model="countName"
default-value="xx市"
style="width: 80px"
dropdown-class-name="eia-dropdown-class"
>
<a-select-option v-for="item in countNameArr" :key="item.key" :value="item">{{ item }}</a-select-option>
</a-select>
<style lang="scss"> // 这里一定不能加scoped!! 否则不生效
.eia-dropdown-class {
.ant-select-dropdown-menu-item {
font-size: 13px;
padding: 2px 6px;
}
.ant-select-dropdown-menu{
&::-webkit-scrollbar {
width: 8px;
height: 2px;
background: #dee4e9;
border-radius: 6px; /*外层轨道*/
}
&::-webkit-scrollbar-thumb {
display: block;
width: 8px;
margin: 0 auto;
border-radius: 6px;
background: rgba(54, 138, 241, 0.5); /*内层轨道*/
}
}
}
</style>
生活是痛苦的白天,死亡是凉爽的夜晚。