专业模板建站软件,外贸如何网络推广,龙岗做网站多少钱,建设商场黄金网站因为业务需求#xff0c;从element plus直接拿过来的组件样式和整体风格不搭#xff0c;所以要修改样式#xff0c;直接deep修改根本不生效#xff0c;最后才发现el-date-picker组件有一个popper-class属性#xff0c;通过这个属性我们就能够修改下拉框的样式#xff0c;… 因为业务需求从element plus直接拿过来的组件样式和整体风格不搭所以要修改样式直接deep修改根本不生效最后才发现el-date-picker组件有一个popper-class属性通过这个属性我们就能够修改下拉框的样式下面就直接放代码吧希望能帮到你噢。 template
// 如果需要修改输入框的样式最好在el-date-picker外套一个div样式就在这个div下写
// 避免污染全局的样式div classtime-box el-date-picker v-modeltime typedate prefix-iconCaretBottom // 组件的前置图标可以通过这个属性修改placeholder请选择时间popper-classpopperClass // 下拉框的样式通过该属性修改//div
/templatescript setup nameTimeSelect
import { onBeforeUnmount, provide, reactive, readonly, ref } from vue;const time ref(null);/script
// 这里需要注意的是不要在style里面写 scoped
style langscss
// 这里是下拉框的样式需要修改什么样式就直接通过浏览器查看你要改的样式然后就改就行
.popperClass {//图标样式.el-icon {color: #fff;}//头部样式.el-date-picker__header-label {color: #fff;font-size: 18px;}// 星期样式.el-date-table th {color: #fff;}// 时间选择器层样式.el-picker-panel {z-index: 2007;color: #fff;background: rgba(30, 84, 128, 0.8);border: 1px solid rgba(29, 128, 218, 1);}
}
// 输入框的样式在这里改就行
.time-box {.el-input__wrapper {background-color: transparent;border-radius: 0px;box-shadow: none;// width: 50px;}.el-input__inner {color: #ffffff;}.el-date-editor.el-input,.el-date-editor.el-input__wrapper {width: 120px;}.el-input__wrapper:hover {box-shadow: none;}.el-input {--el-input-focus-border-color: transparent;--el-input-border: none;}.el-popper.is-light {background: #255783;border: 1px solid #106c94;}
}
// 弹出框popper层样式
.el-picker__popper.el-popper {background: rgba(30, 84, 128, 0.8);border: 1px solid rgba(29, 128, 218, 1);box-shadow: rgba(30, 84, 128, 0.8);
}
// 弹出框外部尖三角样式
.el-popper.is-light .el-popper__arrow::before {border: 1px solid rgba(29, 128, 218, 1);background: rgba(29, 128, 218, 1);
}
/style
最后的效果图
