Vue----el-date-picker组件自定义样式

摆烂小露

于 2024-08-20 14:41:59 发布

阅读量243

点赞数 11

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_53621870/article/details/141358023

版权

下图是自定义的日期最近样式，针对背景，边框，字体，通过自定义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;
  }
}