下图是自定义的日期最近样式,针对背景,边框,字体,通过自定义class样式修改原生组件样式
相关代码及样式:
<el-date-picker class="pickClass" :append-to-body='false' v-model="queryParams.period" type="month" clearable value-format="yyyy-MM" style="width: 240px;margin-right: 10px;"/>
.pickClass{ .el-input__inner{ background: #001549 !important; border: 1px solid #30dff5 !important; border-radius: 2px !important; color:white !important; font-size: 18px; } .el-picker-panel { top:50px!important; left:0px!important; background: #032979 !important; color: #ffffff; border: 1px solid #30dff5 !important; line-height: 20px; } .el-picker-panel .el-date-range-picker__time-header { border-bottom: 1px solid #30dff5 !important; } .el-picker-panel .el-input__inner { background: #001549 !important; border: 1px solid #30dff5 !important; border-radius: 2px !important; color:white !important; font-size: 18px; } .el-picker-panel .el-date-range-picker__time-header { border-bottom: 1px solid #93bee7 !important; } .el-picker-panel__icon-btn { width: 8px; height: 10px; color: #cbd3f0 !important; } .el-picker-panel .el-input__inner { background-color: #19466f; border: #30dff5; color: #e8fdff; } .el-date-picker__header-label { color: #ffffff !important; } .el-date-picker__header-label:hover { color: #ffffff; } .el-date-table td.disabled div { background-color: #30dff5 !important; } .el-picker-panel .el-date-table th { color: #c3e3ec; } .el-picker-panel .el-date-table td.available { font-size: 16px; font-weight: bold; color: #ffffff; } .el-date-table td.available:hover { color: #30dff5!important; } .el-month-table td .cell { color: #ffffff; } }