使用vue3.0实现考勤日历组件

自定义日历组件，首先我们要明确需求与面板展示内容

1. 周日~周六。
2. 当前月日历1~（28/29/30/31），当前月1号如果不是周日，需要上月最后日历补全，当月最后一天不是周六需要下月开始日历补全。
3. 切换至上月，切换至下月按钮
4. 当前年月展示
5. 如果某日有考勤异常，考勤异常日期标记
6. 当前日期展示展示为‘今’
7. 点击上月日期切换至上月面板并选中该日期弹出该日期考勤信息
8. 点击下月日期切换至下月面板并选中该日期弹出该日期的考勤信息
9. 点击当前月日期则选中当前日期并弹出该日期的考勤信息

 首先日历面板实现，

HTML结构如下

<ul class="week">
      <li>日</li>
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li>六</li>
    </ul>
    <ul class="dateList">
      <li
        v-for="item in dateList.List"
        @click="intraday(item, item.date)"
        :class="item.class"
        :date="item.date"
        :key="item"
      >
        <div>{
  { item.text }}</div>
        <i></i>
      </li>
    </ul>

其中dateList为我们js计算出的当前面板应该展示的日历数组对象(包括上月的日期、当月日期和下月日期)，item.class为当前日期展示样式的类名(包括上月日期样式‘upMonth’，下月日期样式‘lastMonth’，假日样式‘Holiyday’，选中样式‘selected’，今天样式‘today’，请假样式‘leave’，考勤异常样式‘absent’)，item.date为日期（xxxx-xx-xx）,item.text为当前日，今天展示为‘今’，‘<i>