element_ui的datePicker修改样式
2021/6/15 10:21:09
本文主要是介绍element_ui的datePicker修改样式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
修改后的样式:
代码:
代码在App.vue中,因为其他页面中添加了<style lang="scss" scoped>,我将App.vue作为了公共样式
$colorTime:#45f0ea; body{ // 时间选择整体,选择下拉 .el-picker-panel{ background: url(~@/assets/images/rigt_con_bg.png) no-repeat !important; color: $colorTime !important; border-color: $colorTime !important; } //时间选择内容头部 .el-date-picker__header--bordered{ border-bottom: 1px solid $colorTime !important; } // 左右箭头 .el-picker-panel__icon-btn, .el-date-picker__header-label{ color:$colorTime !important; } //年,月 .el-year-table td .cell,.el-month-table td .cell{ color:$colorTime; font-size: 14px; } //年月选中/滑过样式 .el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell,.el-year-table td.today .cell, .el-month-table td .cell:hover, .el-month-table td.current:not(.disabled) .cell,.el-month-table td.today .cell{ color: #fff !important; background-color: #01ccff !important; border-radius: 4px !important; font-size: 15px !important; width: 60px; text-align: center; } }
这篇关于element_ui的datePicker修改样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28pyqt 怎么打包整个项目-icode9专业技术文章分享
- 2024-09-28laravel Commands 创建带有参数的 Artisan 命令的步骤和示例-icode9专业技术文章分享
- 2024-09-28antd怎么实现渲染tiff图片-icode9专业技术文章分享
- 2024-09-28英文半角中划线和中文全角的中划线有什么区别-icode9专业技术文章分享
- 2024-09-28nvm npm 和node 他们之间有什么关系-icode9专业技术文章分享
- 2024-09-28Node Version Manager (nvm)使用教程-icode9专业技术文章分享
- 2024-09-28nvm命令太慢,是什么原因-icode9专业技术文章分享
- 2024-09-28Kotlin 如何增加、删除和修改 MutableStateFlow 中的值。-icode9专业技术文章分享
- 2024-09-28Kotlin的stateFlow.update 写法介绍-icode9专业技术文章分享
- 2024-09-28kotlin 怎么获取当前时间格式-icode9专业技术文章分享