Element-UI el-calendar样式如何修改日历

 更新时间:2024年08月06日 09:07:55   作者:A_Hawthorn  
这篇文章主要介绍了Element-UI el-calendar样式如何修改日历问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Element-UI el-calendar样式修改日历

注:本人水平有限,仅供参考,有所意见和建议欢迎指出

效果展示

代码实现

  • vue:
<template>
   <div class="left_calendar">
        <div class="left_calendar_body">
          <el-calendar>
            <template
              slot="dateCell"
              slot-scope="{data}">
              <div :class="data.isSelected ? 'choseDay' : ''">
                <p>
                  {{ data.day.slice(8) }}
                </p>
              </div>
              
            </template>
          </el-calendar>
        </div>
   </div>
</template>
 
<style scoped>
/* 一 二 三 四 五 六 日 */
::v-deep .el-calendar-table thead th {
    padding: 0;
    font-size: 13px;
    color: #9CB2CD;
}
/* 去除边框 */
::v-deep .el-calendar-table tr td:first-child{
  border: none;
}
::v-deep .el-calendar-table tr:first-child td{
  border: none;
}
::v-deep .el-calendar-table__row td{
  border: none;
}
/* 当前月样式 */
::v-deep .el-calendar-table:not(.is-range){
  color: rgba(156, 178, 205, 1);
}
</style>
  • css:
.choseDay {
    position: relative;
    top: -12px;
    width: 36px;
    height: 36px;
    background-color: rgba(83, 143, 255, 1);
    color:#fff;
    border-radius: 30px;
    line-height: 35px;
    z-index: 6;
}

.left_calendar {
    width: 315px;
    height: 395px;
    left: 30px;
    top: 30px;
    position: absolute;
}

.left_calendar_body {
    height: 280px;
    left: 3px;
    top: 85px;
    position: absolute;
}

.el-calendar__header .el-calendar__title {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    font: 17px "OPPOSans-R";
    color: #273142;
}

.el-calendar-table thead th:before{
    color: #9CB2CD;
    font-size: 13px;
    content: '周';
}

.el-calendar__button-group {
    width: 100%;
}

.el-button-group {
    display: flex;
    justify-content: space-between;
}

.el-button-group::after, .el-button-group::before {
    content: unset;
}

.el-button-group>.el-button:not(:first-child):not(:last-child) {
    display: none;
}

.el-button-group>.el-button:first-child:before{
    content: '<';
}

.el-button-group>.el-button:last-child:before{
    content: '>';
}

.el-button-group>.el-button:first-child{
    position: relative;
    left: -18px;
}

.el-button-group>.el-button:last-child{
    position: relative;
    left: 210px;
}

.el-button-group>.el-button:first-child span, .el-button-group>.el-button:last-child span{
    display: none;
}

.el-calendar .el-calendar-table .el-calendar-day{
    padding: 0px;
    text-align: center;
    font: 13px 'Poppins-Regular';
    background-color: rgb(255, 255, 255);
    height: 23px;
    width: 36px;
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue 3集成海康Web插件实现视频监控功能

    Vue 3集成海康Web插件实现视频监控功能

    本文详细介绍了如何使用 Vue 3 框架集成海康Web插件实现视频监控功能,通过定义属性、事件、变量,以及编写初始化、播放视频、处理节点点击事件等方法,我们成功实现了视频监控系统的前端部分,感兴趣的朋友一起看看吧
    2024-11-11
  • vue.js异步上传文件前后端实现代码

    vue.js异步上传文件前后端实现代码

    这篇文章主要为大家详细介绍了vue.js异步上传文件前后端的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • el-elementUI使用el-date-picker选择年月

    el-elementUI使用el-date-picker选择年月

    本文主要介绍了el-elementUI使用el-date-picker选择年月,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-02-02
  • Vue Promise解决回调地狱问题实现方法

    Vue Promise解决回调地狱问题实现方法

    这篇文章主要介绍了Vue Promise解决回调地狱问题,总的来说这并不是一道难题,那为什么要拿出这道题介绍?拿出这道题真正想要传达的是解题的思路,以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路
    2023-01-01
  • vue实现随机验证码功能(完整代码)

    vue实现随机验证码功能(完整代码)

    验证码功能在我们的身边用处极广,今天小编给大家分享基于vue实现随机验证码功能,感兴趣的朋友跟随小编一起看看吧
    2019-12-12
  • 一文了解Vue 3 的 generate 是这样生成 render 函数的

    一文了解Vue 3 的 generate 是这样生成 render&n

    本文介绍generate阶段是如何根据javascript AST抽象语法树生成render函数字符串的,本文中使用的vue版本为3.4.19,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • vue列表单项展开收缩功能之this.$refs的详解

    vue列表单项展开收缩功能之this.$refs的详解

    这篇文章主要介绍了vue列表单项展开收缩功能之this.$refs的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 利用Vue v-model实现一个自定义的表单组件

    利用Vue v-model实现一个自定义的表单组件

    本篇文章主要介绍了利用Vue v-model实现一个自定义的表单组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 完美解决vue 中多个echarts图表自适应的问题

    完美解决vue 中多个echarts图表自适应的问题

    这篇文章主要介绍了完美解决vue 中多个echarts图表自适应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 浅聊一下Vue2中的functional组件

    浅聊一下Vue2中的functional组件

    最近听到有人提到了Vue2的functional组件,大致上是说这个东西没有生命周期,在渲染层面上,会减少很多的消耗,一番处理之后,首屏时间和内存都能减少不少,所以本文小编就来和大家聊聊Vue2中的functional组件<BR>
    2023-08-08

最新评论