ant design vue选择框背景色更改
因为要实现网页白天模式和夜间模式的切换,那相应文字和组件颜色也要适配对应的主题,而a-select默认的白色背景色在夜间模式下非常突兀,故我们要修改选择框和选项列表框的颜色。另外关于下面代码中的getPopupContainer这个API,是因为a-select默认相对于body定位的,故我们点开选项列表后滑动页面,选项列表会相对视口固定,即与选项框分离,使用getPopupContainer将a
·
需求
因为要实现网页白天模式和夜间模式的切换,那相应文字和组件颜色也要适配对应的主题,而a-select默认的白色背景色在夜间模式下非常突兀,故我们要修改选择框和选项列表框的颜色。
效果
白天模式
夜间模式
实现
先介绍下背景,本次使用的是vue3框架,另外关于下面代码中的getPopupContainer这个API,是因为a-select默认相对于body定位的,故我们点开选项列表后滑动页面,选项列表会相对视口固定,即与选项框分离,使用getPopupContainer将a-select绑定到他的父节点上,这样就解决了两者分离问题:
<a-select ref="select" v-model:value="optionValue" class="select" :class="props.myClass"
:getPopupContainer="triggerNode => { return triggerNode.parentNode }">
<template v-for="(item, index) in props.options" :key="index">
<a-select-option :value="item.value">{{ item.name }}</a-select-option>
</template>
</a-select>
修改a-select的样式,我们需要进行样式穿透,按需求我们要修改选项框字体、背景、下拉箭头颜色,选项列表字体、背景颜色,选中后的选项颜色与悬停时选项颜色:
<style scoped lang='scss'>
.select {
position: absolute;
top: 0;
right: 16px;
width: 98px;
height: 24px;
font-size: 14px;
&.moon {
color: #fff;
:deep() {
.ant-select-arrow {
color: #fff;
}
.ant-select-selector {
height: 24px;
border-radius: 4px;
background-color: transparent;
}
.ant-select-dropdown {
background-color: transparent;
.ant-select-item {
color: #fff;
&:hover {
background-color: #4a4a4a;
}
}
.ant-select-item-option-active {
background-color: #3a3a3a;
}
.ant-select-item-option-selected {
background-color: #3a3a3a;
}
}
}
}
}
</style>
实现效果
更多推荐
已为社区贡献1条内容
所有评论(0)