jjzjj

【VUE3】ElementUI--el-date-picker下拉控件样式修改（高亮显示设置）

腌肉要轻轻拍打 2023-08-15 原文

ElementUI--el-date-picker下拉控件样式修改

一些废话

	默默做前端，分享一些自己在项目需求实现中遇到的奇妙问题
	（主要是网上搜索不到解决办法自己解决后的总结方法和解决办法但不全面，自己整理总结的存档）。

事发背景

	ElementUI的日期选择器有默认样式，即给默认接收或者当前的年、月、日加入高亮显示。
	但这次在项目实现后需求验收后要求把选中后的年、月、日变成高亮显示，默认的高亮移除。


可以看到在截图中这个日期默认高亮显示的是30号，但是我选中其他日期后30号这个数字的高亮并没有移除。
年、月的样式同理。

这显然是不符合需求的，但是又需要用到这些控件，所以就可以通过style来改写el-date-picker的对应样式，以使组件达到需求要求的效果。

实现效果

于是我通过一些查找和样式的改变做出了这个需求需要的效果，如下所示：
默认选中当前年份时：
删除选中时：
选中任意一个年份时：
月的选中与日的选中效果也是与年一致。
月选中效果：
日选中效果：

实现思路

  1. 找到原始组件选中某个日期，ctrl+F5弹出检查窗口，找到这个高亮的css样式；
  2. 然后我们可以得知date-picker组件要使当前日期高亮的css写法为
.el-month-table td.today .cell{
    color: var(--el-color-primary);
    font-weight: 700;
}

我们如果要取消这个高亮，就是把它设置成普通样式！

.el-month-table td.today .cell { // 月份
    font-weight: normal; // 字体加粗程度改成不加粗
    color: #606266; // 未选中状态的日期颜色
 }
  1. 基于这个基础我们就可以其他选择器的css的写法应为：
.el-date-table td.today .el-date-table-cell__text { // 日
    font-weight: normal;
     color: #606266;
  }
  .el-year-table td.today .cell { // 年
    font-weight: normal;
    color: #606266;
  }
  1. 此时页面里就成功得到了日期的选中状态圆圈高亮和年月的选中状态不加粗高亮；


  1. 可以看到日期选中器的高亮效果是可以的，但是年和月的选择器高亮效果太素了，甚至没有加粗，所以我们可以再进行一些润色，让这个日期选择器整体看起来都是一个样式的比较协调；
.el-year-table td.current:not(.disabled) .cell{
    color: #ffffff;
    font-weight: bold !important;
    background-color: #409eff;
    border-radius: 100px; // 设置100是为了让它很圆乎
  }

效果如下，就跟日期选择器一样协调了，月选择器的写法也是一样

总结和完整代码

在vue项目中，因 element-UI的时间选择器 el-date-picker 是将元素直接挂载到页面的中，而非自身元素下，所以使用 /deep/、 >>>、 ::v-deep 等穿透无法定位到元素，所以我们可以利用时间选择器的popper-class属性，给下拉框设置样式。

<el-date-picker
  v-model="value"
  type="year" // 年份选择器
  placeholder="请选择"
  format="YYYY"
  value-format="YYYY"
  popper-class="date_form"
/>

然后在src>assets>style里创建table_style.scss，在该文件内进行样式编写

.date_form {
  .el-year-table td.current:not(.disabled) .cell{
    color: #ffffff;
    font-weight: bold !important;
    background-color: var(--el-datepicker-active-color); // 这里应用的是项目的默认样式颜色，跟整个系统保持统一
    border-radius: 100px;
  }
  .el-year-table td.today .cell {
    font-weight: normal;
    color: #606266;
  }
  .el-month-table td.current:not(.disabled) .cell{
    color: #ffffff;
    font-weight: bold !important;
    background-color: var(--el-datepicker-active-color);
    border-radius: 100px;
  }
  .el-month-table td.today .cell {
    font-weight: normal;
    color: #606266;
  }
  .el-date-table td.today .el-date-table-cell__text {
    color: #606266;
    font-weight: normal;
  }
  .el-date-table td.current:not(.disabled) .el-date-table-cell__text {
    color: #ffffff;
    font-weight: bold !important;
    background-color: var(--el-datepicker-active-color);
  }
}

最后在main.ts引入即可完成样式的修改

import "@/assets/style/table_style.scss";

参考资料

  1. https://blog.csdn.net/qq_21113235/article/details/126521564.
  2. https://www.cnblogs.com/min77/p/14511750.html.
el-date-pickerElementUIspanclasstoken前端vue.jsscss

有关【VUE3】ElementUI--el-date-picker下拉控件样式修改（高亮显示设置）的更多相关文章

  1. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  3. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路

  4. ruby-on-rails - ActiveAdmin 自定义选择过滤器下拉名称 - 2

    对于用户模型，我有一个过滤器来检查用户的预订状态，该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而，这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时，我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点？ 最佳答案 假设booking_status是模型中的枚举字段，您可以使用:过滤器:booking

  5. ruby - Rails 3 - 我可以将开始日期设置为 date_select 方法吗？ - 2

    date_select方法只能设置:start_year，但我想设置开始日期(例如3个月前的日期)(但没有这样的选项)。那么，我可以将开始日期设置为date_select方法吗？或者，要制作这样的选择框，我应该使用select_tag和options_for_select吗？或者，有什么解决办法吗？谢谢， 最佳答案 有可能……例如:start_year–设置年份选择的开始年份。默认为Time.now.year-5参见thisresource. 关于ruby-Rails3-我可以将开始日期

  6. ruby - Date 与 nil 的比较失败 - ruby - 2

    我正在运行这样的代码:ifvalid_from>Date.today当我运行它时，我得到一个错误提示comparisonofDatewithnilfailed我假设它正在发生，因为在某些情况下valid_from是nil。有没有办法避免出现此错误？ 最佳答案 你可以这样做:ifvalid_fromandvalid_from>Date.today...end这将在第一个子句上短路，因为valid_from为nil，因此为false。 关于ruby-Date与nil的比较失败-ruby，我们

  7. ruby-on-rails - Scaffold Rails 3 View 中的外键下拉列表 - 2

    我使用脚手架和Rails3创建了2个模型。模型是位置和作业，每个作业都有一个位置。我在脚手架生成代码中创建了所需的引用调用，但是当我查看创建新作业的View时，我看到的只是一个文本框，我应该在其中添加location_id。我怎样才能让它变成下拉菜单以获得更好的用户体验？ 最佳答案 想象一下，您有每个位置的titleAPI:http://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/collection_select 关于r

  8. ruby-on-rails - Ruby on Rails - 我可以在调用之前修改属性的值吗？ - 2

    假设我有一个名为Product的模型，其中有一个名为brand的字段。假设brand的值以this_is_a_brand格式存储。我可以在模型(或其他任何地方)中定义一个方法，允许我在调用brand之前修改它的值吗？例如，如果我调用@product.brand，我想得到ThisisaBrand，而不是this_is_a_brand。 最佳答案 我建议使用方括号语法([]和[]=)而不是read_attribute和write_attribute。方括号语法更短并且designedtowraptheprotectedread/writ

  9. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  10. ruby-on-rails - date_select ruby - 2

    如何在Ruby中扩展date_select的范围？？它只显示2005年，我想用它作为出生日期。 最佳答案 您可以使用:start_year选项，参见thedocumentation. 关于ruby-on-rails-date_selectruby，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/2047739/

随机推荐