修改element-ui中el-calendar(日历)的样式

效果图如下:

在这里插入图片描述

<template><div class="dashboard-container"><el-card style="width: 350px; height: auto; border-radius: 8px"><div class="custom-style"><p class="new-data">{{ newDate }}</p><el-calendar ref="calendar" v-model="value" /></div></el-card></div>
</template>
<script>export default {name: 'Dashboard',data() {return {value: new Date()}},computed: {newDate() {return this.formatDate(this.value)}},methods: {formatDate(value) {const date = new Date(value)const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()return `${year}${month < 10 ? '0' + month : month}${day < 10 ? '0' + day : day}`}}
}
</script><style lang="scss">// 自定义样式
.custom-style {.new-data {position: absolute;margin: 0;line-height: 26px;}.el-calendar__title {opacity: 0;}// 上个月、下个月按钮样式.el-button-group>.el-button:first-child:before {content: "";display: inline-block;width: 6px !important;height: 6px !important;border: transparent;border-top: 1px solid #6e6c6c;border-right: 1px solid #6e6c6c;transform: rotate(-135deg);/* 可根据需要调整间距 */}.el-button-group>.el-button:last-child:before {content: "";display: inline-block;width: 6px !important;height: 6px !important;border: transparent;border-top: 1px solid #6e6c6c;border-right: 1px solid #6e6c6c;transform: rotate(45deg);}.el-button-group>.el-button:not(:first-child):not(:last-child) {color: #444444;}.el-button-group>.el-button:first-child span,.el-button-group>.el-button:last-child span {display: none;}.el-button-group>.el-button:not(:last-child) {margin-right: -15px;}// 去除文字.el-button-group>.el-button:not(:first-child):not(:last-child) {span {display: none;}}.el-button-group>.el-button {border: 0;background: transparent;}.el-calendar-table__row td {// 去掉边框border: none !important;// 缩小高度.el-calendar-day {height: 32px;line-height: 18px;// 设置居中text-align: center;}}// 自定义选中、悬浮颜色.el-calendar-table .el-calendar-day:hover {color: #fff;background-color: #ff5e78 !important;}.el-calendar-table .is-today {color: #303133;}.el-backtop,.el-calendar-table td.is-today {color: #ff5e78;}.el-calendar-table .is-selected {color: #fff !important;background-color: #ff5e78 !important;}.el-calendar__header {display: flex;justify-content: space-between;padding: 0px 20px;border: none;}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/819745.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

macbook怎么录屏幕视频?两款实用工具推荐!

在数字化时代&#xff0c;录制屏幕视频已成为我们日常生活和工作中不可或缺的一部分。MacBook作为一款广受欢迎的电脑品牌&#xff0c;为我们提供了高效且便捷的屏幕录制方式&#xff0c;可是很多用户不知道macbook怎么录屏幕视频。本文将介绍两种在Mac上录制屏幕视频的方法&am…

OpenCV——SUSAN边缘检测

目录 一、SUSAN算法二、代码实现三、结果展示 OpenCV——SUSAN边缘检测由CSDN点云侠原创&#xff0c;爬虫自重。如果你不是在点云侠的博客中看到该文章&#xff0c;那么此处便是不要脸的爬虫。 一、SUSAN算法 Susan边缘检测是一种经典的边缘检测算&#xff0c;它由Susan Smith…

【muduo源码学习】one-loop-per-thread核心原理

在 TCP 网络编程中&#xff0c;这里我们特指在单机的环境下&#xff0c;主要关注两件事。第一&#xff0c;如何正确的处理TCP的连接和断开&#xff0c;以及正确处理数据的收发&#xff1b;在错综复杂的网络环境中&#xff0c;这并非易事&#xff0c;涉及很多细节。第二&#xf…

【JAVA基础篇教学】第十七篇:Java单元测试

博主打算从0-1讲解下java基础教学&#xff0c;今天教学第十七篇&#xff1a;Java单元测试。 单元测试和集成测试是软件开发过程中至关重要的一部分&#xff0c;它们可以帮助确保代码的质量和稳定性。下面我将为您提供详细说明和代码案例。 一、单元测试&#xff08;Unit Test…

Leetcode 221. 最大正方形

心路历程&#xff1a; 这道题是一个动态规划题&#xff0c;但是其实递推关系很难想到&#xff0c;如下图所示&#xff1a; MDP建模&#xff1a; 状态&#xff1a;以i,j为右下角的正方形 动作候选集&#xff1a;这道题的动作候选集其实是是否选择其左上角邻接的三个位置&#x…

11.范式与反范式设计

范式 1.问题 MySQL的库表设计&#xff0c;在很多时候我们都是率性而为&#xff0c;往往在前期的设计中考虑不全面&#xff0c;同时对于库表结构的划分也并不明确&#xff0c;所以很多时候在开发过程中&#xff0c;代码敲着敲着会去重构某张表结构&#xff0c;甚至大面积重构多…

深圳比创达电子EMC|EMC电磁兼容性:电子设备稳定运行的保障

随着科技的飞速发展&#xff0c;电子设备在人们的日常生活中发挥着越来越重要的作用。然而&#xff0c;随之而来的电磁干扰问题也日益突出。电磁兼容性&#xff08;EMC&#xff09;作为衡量电子设备在电磁环境中正常工作能力的关键指标&#xff0c;其重要性不言而喻。 一、EMC…

IP地址是随着网络变化的吗?

IP地址&#xff0c;即互联网协议地址&#xff0c;是分配给每个联网设备或网络接口的数字标签。它在网络通信中起着至关重要的作用&#xff0c;是设备之间互相识别和通信的基础。然而&#xff0c;关于IP地址是否随着网络变化&#xff0c;这是一个值得深入探讨的问题&#xff0c;…

深度残差收缩网络中,使用 Sigmoid 函数的用意在哪?

在深度残差收缩网络中&#xff0c;使用 Sigmoid 函数将输出归一化到 0 和 1 之间的目的是为了限制输出值的范围&#xff0c;并且使得输出可以被解释为概率。这个 Sigmoid 函数的输出可以被看作是一个置信度或者概率的度量&#xff0c;表示某个事件发生的可能性。 在设置阈值时…

详解playwright 官方Javascript demo(适合小白)

如果大家刚上手playwright&#xff0c;并看到了Javascript脚本的官方demo&#xff0c;代码如下&#xff1a; const { webkit } require(playwright);(async () > {const browser await webkit.launch();const page await browser.newPage();await page.goto(http://what…

开放式耳机怎么选?五大市场热卖爆款推荐!

近年来&#xff0c;开放式耳机风潮席卷市场&#xff0c;各大知名品牌纷纷推出新品&#xff0c;以满足消费者的需求。相较于传统的入耳式耳机&#xff0c;开放式耳机凭借其独特的佩戴方式&#xff0c;受到了广大消费者的热烈追捧。它不仅有效避免了长时间佩戴带来的耳道不透气、…

【数据结构】栈的实现

&#x1f451;个人主页&#xff1a;啊Q闻 &#x1f387;收录专栏&#xff1a;《数据结构》 &#x1f389;前路漫漫亦灿灿 前言 栈是一种特殊的线性表&#xff0c;我们在有了顺序表和链表的知识的基础上&#xff0c;再来学习栈&#xff0c;掌握起来就更轻松了…

所有可能的真二叉树(Lc894)——记忆化搜索

给你一个整数 n &#xff0c;请你找出所有可能含 n 个节点的 真二叉树 &#xff0c;并以列表形式返回。答案中每棵树的每个节点都必须符合 Node.val 0 。 答案的每个元素都是一棵真二叉树的根节点。你可以按 任意顺序 返回最终的真二叉树列表。 真二叉树 是一类二叉树&#…

【24年物联网华为杯】赛题分析与初步计划

赛事介绍 官网链接&#xff1a;2024 年全国大学生物联网设计竞赛 (sjtu.edu.cn) 含金量&#xff1a;属于A类赛事 &#xff08;注意&#xff1a;很多搜索结果的序号是按照选入时间排列的&#xff0c;与含金量无关&#xff0c;华为杯是23年选入的&#xff09; Kimi Chat: 全国…

开源模型应用落地-LangChain试炼-CPU调用QWen1.5(一)

一、前言 尽管现在的大语言模型已经非常强大&#xff0c;可以解决许多问题&#xff0c;但在处理复杂情况时&#xff0c;仍然需要进行多个步骤或整合不同的流程才能达到最终的目标。然而&#xff0c;现在可以利用langchain来使得模型的应用变得更加直接和简单。 通过langchain框…

【学习笔记十二】EWM上架仓位确定逻辑及操作演示

一、前言 关于EWM上架仓位确定的过程&#xff0c;我在【学习笔记十一】EWM上架目标仓位确定过程及配置-CSDN博客中讲到了 EWM根据仓库类型&#xff08;storage type&#xff09;、仓库分区&#xff08;storage section&#xff09;和上架策略&#xff08;putaway strategies&…

机器学习算法快速入门

文章目录 0.简介1.常用术语1) 模型2) 数据集3) 样本&特征4) 向量5) 矩阵6)假设函数&损失函数7&#xff09;拟合&过拟合&欠拟合 2.线性回归3.梯度下降求极值4.Logistic回归算法&#xff08;分类问题&#xff09;5.KNN最邻近分类算法6.朴素贝叶斯分类算法7.决策树…

SAP 技巧篇:解决下拉菜单不显示前缀编码问题

事务代码 BP创建主数据选择组时&#xff0c;组前面不显示英文分组&#xff0c;或者其他界面不显示对应英文分组” 01 — 背景需求 BP等事务代码进来不显示前面系统英文分组 02 — 实现 返回SAP GUI找到选项>可视化1>控件全部打钩 先打钩&#xff1a;在下拉列表内显示…

Golang | Leetcode Golang题解之第29题两数相除

题目&#xff1a; 题解&#xff1a; func divide(dividend, divisor int) int {if dividend math.MinInt32 { // 考虑被除数为最小值的情况if divisor 1 {return math.MinInt32}if divisor -1 {return math.MaxInt32}}if divisor math.MinInt32 { // 考虑除数为最小值的情…

汽车抗疲劳驾驶测试铸铁试验底座技术要求有哪些

铸铁平台试验台底座的主要技术参数要求 1、 试验台底座设计制造符合JB/T794-1999《铸铁平板》标准。 2、 试验铁底板及所有附件的计量单位全部采用 单位&#xff08;SI&#xff09;标准。 3、铸铁平台平板材质&#xff1a;用细密的灰口铸铁HT250或HT200&#xff0c;强度符…