vant组件如何仿造钉钉打卡考勤展示在移动端页面上详解

前沿

前段时间有个需求，让客户每日打卡，然后在日历上展示每日打卡的状态，红色点表示未打卡，蓝色点表示已打卡。之前开发项目都是点击弹窗获取获取对应的日期当作表单参数提交给后端，像这个打卡日历展示在屏幕上还是第一次见，那就开始思考，本项目使用的vue3+vant组件开发

vant 官方组件
https://vant-ui.github.io/vant/#/zh-CN
使用 van-calendar 的组件

平铺展示
将 poppable 设置为 false，日历会直接展示在页面内，而不是以弹层的形式出现。

<van-calendar
  title="日历"
  :poppable="false"
  :show-confirm="false"
  :style="{ height: '500px' }"
/>

困惑：
写到这可以看到页面展示的日历，但是如何把数据状态展示在页面上的呢？于是在继续往下查找，在API文档里查找formatter

<template>
 		<van-calendar :show-title="false" readonly switch-mode="month" :poppable="false" :show-confirm="false"
          :style="{ height: '480px', marginTop: ' 8px' }" ref="calendar" first-day-of-week="1" :formatter="formatter"
          @panel-change="onPanelChange">
        </van-calendar>
 </template>

<script>
const formatter = (day) => {
//形参day是object对象，在开发的时候可以打印下，（bottomInfo,date,text,type,属性）
 //dayInfo.value 是获取后端接口的数据，如下图
  for (var key in dayInfo.value) {
    if (dayInfo.value[key]) {
      // haveDay.value++
      if (dayjs(key).valueOf() == Date.parse(day.date)) {
        day.className = 'addDot' //添加蓝色点样式
      }
    } else {
      if (dayjs(key).valueOf() == Date.parse(day.date)) {
        day.className = 'addRedDot' //添加红色点样式
      }

    }

  }
  return day   //一定要把数据return出去，这样才能显示在日历面板上

  
}

</script>

出现的效果图如下：

结论

使用vant组件时，一定要注意文档中的说明参数的类型，同时写逻辑要写完整才能知道是不是对的，这个日历的逻辑在刚写的时候就报错，当时快把心态搞崩了，不过最终实现了客户需求，哈哈