VUE：自定义实现日历表

简介

学习了一下关于如何自定义一个日历表。
参考文章：Vue写一个日历

具体实现

第一步：打开windows的日历

可以看到，有如下关键点（暂时忽略农历、节气、节日的备注信息）：
①年月的信息；
②上一个月、下一个月的快捷切换按钮；
③周一到周天的行；
④深颜色的当前月日期；
⑤填充空白的灰色日期（其他月的日期信息）；

第二步：分析

①计算出显示月份的天，并显示；
②月初、月末的星期几的空白日，需要上一个月下一个月的对应天数补齐；
③切换月份时，重新执行①②；
④第一次显示时，今天日期的选中；
⑤注意2月的天数差距：

a、通常能被4整除的年份是闰年，不能被4整除的年份是平年。如：1988年2008年是闰年；2005年2006年2007年是平年。

b、如果是世纪年，即整百年能被400整除是闰年，否则是平年。如：2000年就是闰年，1900年就是平年。

c、闰年的2月有29天，平年的2月只有28天。

第三步：了解需要使用到的日期API

getFulleYear(); // 年
getMonth(); // 月， 0-11
getDate();  // 日，也就是几号
getDay();   // 星期几，0-6
new Date(2022,2,10);  // 实际上就是 2022-03-10
new Date(2022,2,0);   // 实际上是 2022-02-28, 也就是2月份的最后一天
new Date(2022,2,-1);  // 实际上是 2022-02-27, 也就是2月份的倒数第二天

var d = new Date();
d.setTime(new Date(2022,1,1).getTime());   
d.getFullYear();   // 2022 , setTime 允许传入毫秒数来更改实例对象

第四步：代码实现

<template>
  <div class="calendar-box">
    <div class="calendar-wrapper">
      <div class="calendar-toolbar">
        <div class="prev" @click="prevMonth">上个月</div>
        <div class="current">{
   {
    currentDateStr }}</div>
        <div class="next" @click="nextMonth">下个月</div>
      </div>

      <div class="calendar-week">
        <div
          class="week-item calendarBorder"
          v-for="item of weekList"
          :key="item"
        >
          {
   {
    item }}
        </div>
      </div>
      <div class="calendar-inner">
        <div
          class="calendar-item calendarBorder"
          v-for="(item, index) of calendarList"
          :key="index"
          :class="{
   
            'calendar-item': true,
            calendarBorder: true,
            'calendar-item-hover': !item.disable,
            'calendar-item-disabled': item.disable,
            'calendar-item-checked':
              dayChecked &&