自定义element-plus的calendar样式

目录

一、原始样式

二、利用浏览器看源码

三、具体代码

---

一、原始样式

API

二、利用浏览器看源码

打开开发者工具

三、具体代码

<template>

      <div class="calendar-container">
        <p class="date">{{ newDate }}</p>
        <el-calendar ref="calendar" v-model="value" />
      </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
      return `${month }月`
    }
  }
}
</script>

<style lang="scss">

// 自定义样式
.calendar-container{
    
    .date {
        position: absolute;
        line-height: 26px;
        margin-top:14px;
        margin-left:32px;
        font-size: 20px;
    }

    .el-calendar__title {
        display:none;
    }
    .el-button-group  {
      margin-top:14px;
      margin-left:260px;

      }



    // 上个月、下个月按钮样式
    .el-button-group>.el-button:first-child:before {
        content: "";
        display: inline-block;
        width: 10px !important;
        height: 10px !important;
        border: transparent;
        border-top: 2px solid gray;
        border-right: 2px solid #6e6c6c;
        transform: rotate(-135deg);
        margin-right: 2px;
        /* 可根据需要调整间距 */
    }

    .el-button-group>.el-button:last-child:before {
        content: "";
        display: inline-block;
        width: 10px !important;
        height: 10px !important;
        border: transparent;
        border-top: 2px solid gray;
        border-right: 2px solid gray;
        transform: rotate(45deg);
    }

   //去除按钮上的文字
    .el-button-group>.el-button:first-child span,
    .el-button-group>.el-button:last-child span {
        display: none;
    }

    .el-button-group>.el-button:first-child {
        margin-right: -15px;
        margin-left:10px;
    }

    // 去除中间按钮
    .el-button-group>.el-button:not(:first-child):not(:last-child) {
            display: none;
        
    }
    // 去除按钮边框
    .el-button-group>.el-button {
        border: none;
        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: rgb(57, 89, 230) !important;
    }

    .el-calendar-table .is-selected {
        color: #fff !important;
        background-color: rgb(57, 89, 230) !important;
    }

    .el-calendar__header {
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        border: none;
    }
}
</style>