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

news2025/1/13 3:36:51
效果图如下:

在这里插入图片描述

<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() + 1
      const 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.coloradmin.cn/o/1618366.html

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

相关文章

Qt使用miniblink第三方浏览器模块

文章目录 一、前言二、miniblink简介三、miniblink使用四、运行效果五、工程结构 一、前言 本文取自刘典武大师&#xff1a;Qt编写地图综合应用58-兼容多浏览器内核 用Qt做项目过程中&#xff0c;遇到需要用到浏览器控件的项目&#xff0c;可能都会绕不开一个问题&#xff0c;那…

12-Makefile_03(续)

使用变量 使用C自动编译成*.o的默认规则有个缺陷&#xff0c;由于没有显式地表示*.o依赖于.h头文件&#xff0c;假如修改了头文件的内容&#xff0c;那么*.o并不会更新&#xff0c;这是不可接受的。并且默认规则使用固定的“cc”进行编译&#xff0c;假如想使用ARM-GCC进行交叉…

Nacos原理简单介绍

注册中心原理 官网&#xff1a;Nacos 注册中心的设计原理 | Nacos nacos注册中心采用了 &#xff1a;pull &#xff08;客户端的轮询&#xff09;和push &#xff08;服务端主动push&#xff09;策略 客户端启动时会将当前服务的信息包含ip、端口号、服务名、集群名等信息封装…

树莓教育坚持特色引领,建设一流应用型影像培训

树莓教育&#xff0c;作为树莓集团旗下的子公司&#xff0c;自创立以来已经走过了十余个春秋。在这漫长的教育征程中&#xff0c;树莓教育始终坚守初心&#xff0c;秉持着七个坚持和十项行动的原则为数字影像产业的建设和发展做出了巨大的贡献。 七个坚持&#xff0c;是树莓教育…

【网络编程】Java网络编程中的基本概念及实现UDP、TCP客户端服务器程序(万字博文)

系列文章目录 【网络通信基础】网络中的常见基本概念 【网络编程】Java网络编程中的基本概念及实现UDP、TCP客户端服务器程序&#xff08;万字博文&#xff09; 【网络原理】UDP协议的报文结构 及 校验和字段的错误检测机制&#xff08;CRC算法、MD5算法&#xff09; 目录 …

大小端解释以及如何使用程序判断IDE的存储模式

今天让我们来了解一下大小端的概念吧 什么是大小端&#xff1f; 大端&#xff08;存储&#xff09;模式&#xff1a;指的是数据的低位保存在内存的高地址处&#xff0c;而数据的高位则保存在内存的低地址处。 小端&#xff08;存储&#xff09;模式&#xff1a;指的是数据的低位…

使用表格法插入公式和编号

如何将公式和编号优雅地插入到论文当中呢&#xff1f; 首先插入一个1行2列的表格 调整一下 输入公式方法一&#xff1a;感觉墨迹公式挺好用的&#xff0c;word自带的 输入公式方法二&#xff1a;图片转LATEX代码 这个方法更快 分享一个公式识别网站 图片识别得到LATEX代码&…

免费PNG素材网站推荐:设计效率倍增!

一、即时设计 新一代协同设计工具即时设计&#xff0c;内置丰富社区资源&#xff0c;可以在此获得设计前线的各类PNG图像&#xff0c;以及矢量图标&#xff0c;包括毛玻璃、3D混搭、全息投影、单色、平面化等&#xff0c;都是符合目前市场的主流风格。通过最近更新、作品、资源…

【ks爬虫软件】把快手评论API接口封装成GUI采集工具

用Python开发爬虫采集软件&#xff0c;可自动抓取快手评论数据&#xff0c;且包含二级评论。 快手的评论接口URL&#xff1a; # 请求地址 url https://www.kuaishou.com/graphql开发者模式分析过程&#xff1a; 进而封装成GUI界面软件&#xff0c;如下&#xff1a; 软件效…

【Linux】开关机命令和服务管理类命令

一般Linux是不会经常进行关机的,关机的正确流程是: sync->shutdown->reboot->poweroff sync: 将内存中的数据同步到硬盘中poweroff: 关闭系统,等同于shutdown -h nowreboot: 重启系统,等同于 shutdown -r nowshutdown[选项] [时间] shutdown命令常见用法: shutdown:…

[vite] ts写配置根目录别名

参考:配置 Vite | Vite 写对象的形式吧 import { defineConfig } from vite import vue from vitejs/plugin-vue import path from path// https://vitejs.dev/config/ export default defineConfig({plugins: [vue()],resolve: {alias: {"": path.resolve(__dirname…

电磁仿真--基本操作-CST-(2)

目录 1. 回顾基操 2. 操作流程 2.1 创建工程 2.2 修改单位 2.3 创建 Shape 2.4 使用拉伸 Extrude 2.5 修改形状 Modify Locally 2.6 导入材料 2.7 材料解释 2.8 材料分配 2.9 查看已分配的材料 2.10 设置频率、背景和边界 2.11 选择 Edge&#xff0c;设置端口 2.…

Linux-进程间通信:System V消息队列

目录 System V IPC概述标识符与IPC Key System V消息队列创建或打开一个消息队列发送消息接收消息控制消息队列1、IPC_STAT2、IPC_SET3、IPC_RMID 查看系统当前的消息队列代码示例 System V IPC&#xff08;Inter-Process Communication&#xff09;是一组用于在 Unix-like 操作…

五款最受欢迎的上网行为管理软件

五款最受欢迎的上网行为管理软件 员工上网看视频怎么办&#xff1f;员工偷偷刷抖音怎么办&#xff1f;员工天天上招聘网&#xff0c;是不是有离职打算&#xff1f; 解决上述困扰的最好办法是使用监控软件了解员工一言一行。以下是几款推荐的上网行为管理和监控软件&#xff1a;…

基于Linux系统命令行安装KingbaseES数据库

人大金仓通用性数据库&#xff08;Kingbase&#xff09;下载网址&#xff1a;人大金仓-成为世界卓越的数据库产品与服务提供商 选择“软件版本-数据库”&#xff0c;筛选条件Linux、完整版。找到需要的版本&#xff0c;点击下载。我下载的是KingbaseES_V008R006C008B0014_Lin6…

机器学习理论基础—神经网络算法公式学习

机器学习理论基础—神经网络公式学习 M-P神经元 M-P神经元&#xff08;一个用来模拟生物行为的数学模型&#xff09;&#xff1a;接收n个输入(通常是来自其他神经 元)&#xff0c;并给各个输入赋予权重计算加权和&#xff0c;然后和自身特有的阈值进行比较 (作减法&#xff0…

【大语言模型基础】Transformer模型Torch代码详解和训练实战

一、Transformer概述 Transformer是由谷歌在17年提出并应用于神经机器翻译的seq2seq模型&#xff0c;其结构完全通过自注意力机制完成对源语言序列和目标语言序列的全局依赖建模。 Transformer由编码器和解码器构成。下图展示了它的结构&#xff0c;其左侧和右侧分别对应着编…

奇妙的探索——偶然发现的bug

今天想在腾讯招聘官网找几个前端的岗位投一下&#xff0c;最近自己也在找工作&#xff0c;结果简历还没有投出去&#xff0c;就发现了腾旭招聘官网的3个前端bug。 1.有时候鼠标hover还没有滑倒下拉选框的菜单上&#xff0c;就消失了&#xff0c;消失的太快了&#xff0c;根本点…

方便快捷!使用Roboflow进行数据增强(附详细操作)

最近使用自定义数据集训练yolov8模型的时候突然发现一件很令人头疼的事情。那就是&#xff0c;数据集中图片太少了。于是想通过数据增强的方法扩大数据集。 通过查阅资料发现&#xff0c;大部分人都是用python中的imgaug库进行图像处理&#xff1b;这种方法最大的不便就是需要转…

【数据结构】stack queue —— 栈和队列

前言 这阵子一直在学数据结构&#xff0c;知识点消化地有点慢导致博客一直没写&#xff0c;现在总算是有时间歇下来补补前面落下的博客了。从现在起恢复周更&#xff0c;努努力一周两篇也不是梦……闲话少说&#xff0c;今天就让我们一起来认识栈和队列 1. 栈的介绍和使用 栈…