在组件中绑定官方提供的属性:
popper-class
,选择器下拉菜单的自定义类名<el-select v-model="currentYear" @visible-change="yearChange($event)" popper-class="date_popper"> <el-option v-for="item in years" :key="item.value" :label="item.label + ' 年'" :value="item.value"> </el-option> </el-select>
再添加一个标签
<style lang="less"></style>
,样式写在这个标签里即可<style lang="less"> //下拉框背景色 .el-popper.is-light.date_popper { color: #000 !important; background: rgba(255, 255, 255, 0.68); border: 1px solid #3782b4 !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } //下拉框的链接小方块 .date_popper.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before { background: rgba(0, 136, 255, 0.767) !important; border: 1px solid rgba(255, 255, 255, 0.788) !important; } .date_popper.el-popper[data-popper-placement^=top] .el-popper__arrow::before { border: 1px solid #254277 !important; background-image: linear-gradient(to right, #B6FAEB, #65ECC1); } //鼠标移动上去的选中色 .date_popper { .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background-image: linear-gradient(to right, #B6FAEB, #65ECC1); } //下拉框的文本颜色 .el-select-dropdown__item { color: #39a0e6 !important; } //选中之后的颜色 .el-select-dropdown__item.selected { background-image: linear-gradient(to right, #B6FAEB, #65ECC1); } } </style>
最后修改:2023 年 09 月 13 日
© 允许规范转载
2 条评论
思想的火花在字句间迸发,照亮认知盲区。
若能结合热点事件分析,会更富时代性。