如何修改element中el-popover + 时间选择器

最新推荐文章于 2024-06-02 21:27:33 发布



最新推荐文章于 2024-06-02 21:27:33 发布

阅读量509

点赞数 7

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/weixin_53954018/article/details/135439207

版权

 <el-popover placement="top-start" :width="240" trigger="click" popper-class="popoverStyleone">
    <template #reference>
                  <div class="clickable-text">
                    {{ traveForm.month || "选择月份" }}
                  </div>
     </template>
      <el-date-picker  popper-class="el-date-pickerone" ref="pickerRef" @change="Jgetechart()" v-model="traveForm.month" type="month"
                  format="YYYY-MM" value-format="YYYY-MM" />
      </el-popover>


<style lang="scss">

.el-popover.popoverStyleone {
  background-color: #090d29;
  border-color: #4ba1ef;
  background: transparent;
}
.el-popover .popoverStyleone .el-popper__arrow {
  border: none !important;
}
.popoverStyleone .el-popper__arrow {
  display: none;
  
}
.popoverStyleone .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #4ba1ef inset !important;
}
.popoverStyleone .el-input__wrapper{
  box-shadow: 0 0 0 1px #4ba1ef inset !important;
  background:transparent;
}
.popoverStyleone .el-input__inner{
  color: #4ba1ef;
}
.popoverStyleone .el-input__icon{
  color: #4ba1ef;
}
  .el-date-pickerone.is-pure {
  background: transparent;
  border: 1px solid #4ba1ef;
  background-size:100% 100%
  }
  .el-date-pickerone .el-popper__arrow {
  display: none;
  
}
/* 日期 1.背景透明 */
.el-date-pickerone .el-date-picker{
  background: transparent;
}
.el-date-pickerone .el-date-picker__header--bordered{
  border-bottom: 1px solid #4ba1ef !important;
}
 
.el-date-pickerone{
  .el-date-table td .el-date-table-cell,
.el-date-picker__header-label,
.el-picker-panel__icon-btn,
.el-date-table th{
  color: #4ba1ef;
}
} 
.el-date-pickerone{
  // 月
.el-picker-panel__body-wrapper .el-month-table td .cell{
  color: #ffffff;
}
.el-picker-panel__body-wrapper .el-month-table td .cell:hover{
  color: #4ba1ef;
}
// 年
.el-picker-panel__body-wrapper .el-year-table td .cell{
  color: #ffffff;
}
.el-picker-panel__body-wrapper .el-year-table td .cell:hover{
  color: #4ba1ef;
}
} 

</style>