如何修改element中el-popover + 时间选择器
发布时间:2024年01月07日
<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>
文章来源:https://blog.csdn.net/weixin_53954018/article/details/135439207
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:chenni525@qq.com进行投诉反馈,一经查实,立即删除!