日历组件日期渲染

最新推荐文章于 2023-06-27 19:41:50 发布

小泡泡c

最新推荐文章于 2023-06-27 19:41:50 发布

阅读量543

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/qq_45325810/article/details/120998398

版权

Vue组件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了一个使用Element UI库实现的日历组件，通过模板插槽自定义日期单元格内容，展示日期并标记休息日。`getDay`方法用于格式化日期，去除前导0；`isWeek`方法判断日期是否为周末，从而在日历上显示'休'标记。

摘要由CSDN通过智能技术生成

1. 日历组件实现效果

在这里插入图片描述

2.代码实现

<template>
  <el-calendar>
    <template slot="dateCell" slot-scope="{ date, data }">
      <div class="date-content">
        <span class="text">{{ getDay(data.day) }}</span>
        <span v-if="isWeek(date)" class="rest">休</span>
      </div>
    </template>
  </el-calendar>
</template>

<script>
export default {
  name: 'Calender',
  methods: {
 // 格式化日期 - 取到没有前缀0的日期
    getDay(value) {
    // 日期格式 yyyy-mm-dd
    // 使用 split 将字符串按照 - 进行拆分 >> 得到数组['yyyy','mm','dd'] >> split[2] 取到日期
      const day = value.split('-')[2]
      // 判断日期是否以0开头,如果是的话,利用 slice 把 0 截取 >> slice(1)从第一位开始截取
      return day.startsWith('0') ? day.slice(1) : day
    },

    // 判断是否休息
    isWeek(date) {
      return date.getDay() === 6 || date.getDay() === 0
    }
}
}
</script>