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

2024-01-07 15:04

本文主要是介绍如何修改element中el-popover + 时间选择器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 <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>

这篇关于如何修改element中el-popover + 时间选择器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/580305

相关文章

利用Python实现时间序列动量策略

《利用Python实现时间序列动量策略》时间序列动量策略作为量化交易领域中最为持久且被深入研究的策略类型之一,其核心理念相对简明:对于显示上升趋势的资产建立多头头寸,对于呈现下降趋势的资产建立空头头寸... 目录引言传统策略面临的风险管理挑战波动率调整机制:实现风险标准化策略实施的技术细节波动率调整的战略价

Nginx 413修改上传文件大小限制的方法详解

《Nginx413修改上传文件大小限制的方法详解》在使用Nginx作为Web服务器时,有时会遇到客户端尝试上传大文件时返回​​413RequestEntityTooLarge​​... 目录1. 理解 ​​413 Request Entity Too Large​​ 错误2. 修改 Nginx 配置2.1

Python对PDF书签进行添加,修改提取和删除操作

《Python对PDF书签进行添加,修改提取和删除操作》PDF书签是PDF文件中的导航工具,通常包含一个标题和一个跳转位置,本教程将详细介绍如何使用Python对PDF文件中的书签进行操作... 目录简介使用工具python 向 PDF 添加书签添加书签添加嵌套书签Python 修改 PDF 书签Pytho

Python日期和时间完全指南与实战

《Python日期和时间完全指南与实战》在软件开发领域,‌日期时间处理‌是贯穿系统设计全生命周期的重要基础能力,本文将深入解析Python日期时间的‌七大核心模块‌,通过‌企业级代码案例‌揭示最佳实践... 目录一、背景与核心价值二、核心模块详解与实战2.1 datetime模块四剑客2.2 时区处理黄金法

macOS Sequoia 15.5 发布: 改进邮件和屏幕使用时间功能

《macOSSequoia15.5发布:改进邮件和屏幕使用时间功能》经过常规Beta测试后,新的macOSSequoia15.5现已公开发布,但重要的新功能将被保留到WWDC和... MACOS Sequoia 15.5 正式发布!本次更新为 Mac 用户带来了一系列功能强化、错误修复和安全性提升,进一步增

Pandas进行周期与时间戳转换的方法

《Pandas进行周期与时间戳转换的方法》本教程将深入讲解如何在pandas中使用to_period()和to_timestamp()方法,完成时间戳与周期之间的转换,并结合实际应用场景展示这些方法的... 目录to_period() 时间戳转周期基本操作应用示例to_timestamp() 周期转时间戳基

JavaScript时间戳与时间的转化常用方法

《JavaScript时间戳与时间的转化常用方法》在JavaScript中,时间戳(Timestamp)通常指Unix时间戳,即从1970年1月1日00:00:00UTC到某个时间点经过的毫秒数,下面... 目录1. 获取当前时间戳2. 时间戳 → 时间对象3. 时间戳php → 格式化字符串4. 时间字符

Java controller接口出入参时间序列化转换操作方法(两种)

《Javacontroller接口出入参时间序列化转换操作方法(两种)》:本文主要介绍Javacontroller接口出入参时间序列化转换操作方法,本文给大家列举两种简单方法,感兴趣的朋友一起看... 目录方式一、使用注解方式二、统一配置场景:在controller编写的接口,在前后端交互过程中一般都会涉及

python处理带有时区的日期和时间数据

《python处理带有时区的日期和时间数据》这篇文章主要为大家详细介绍了如何在Python中使用pytz库处理时区信息,包括获取当前UTC时间,转换为特定时区等,有需要的小伙伴可以参考一下... 目录时区基本信息python datetime使用timezonepandas处理时区数据知识延展时区基本信息

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,:本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指