vue 自定义日历

最新推荐文章于 2024-08-26 13:28:15 发布

施玥喵

最新推荐文章于 2024-08-26 13:28:15 发布

阅读量566

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/macangyewangs/article/details/108853934

版权

本文详细介绍了如何使用 Vue.js 框架来创建一个自定义的日历组件，包括日历的显示、月份切换、日期选择等功能实现，以及在实际项目中的应用和优化技巧。

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

 <el-calendar id="calendar">
        <template
            slot="dateCell"
            slot-scope="{date, data}">
          <div class="calendar-day">{
  { data.day.split('-').slice(2).join('-') }}</div>
            <p v-if="handleSelected(data.day) == 0 ">缺勤两次 </p>
            <p v-else-if="handleSelected(data.day) == 1 ">缺勤一次 </p>
            <p v-else-if="handleSelected(data.day) == 2 ">打卡正常 </p>
        </template>
      </el-calendar>

data() {
    return {
      //日历数组
      attendanceDetailsData:[
        {
          number:0,
          time:'2020-09-28'
        },
        {
          number:1,
          time:'2020-09-27'
        },
        {
          number:2,
          time:'2020-09-26'
        },
      ],
      }