VUE 自定义日历+切换上下月+点击事件

背景：朋友想让我帮他写一个前端的日历demo，昨天晚上抽空搞了一下，产出了一个Demo。由于是简单demo，所以对样式上没有过多的调整。

思路：

获取每个月的第一天是周几，按照周几插入数据。上个月的在1号前面置空，下个月在月最后一天后面从1开始插入
抽调函数，渲染传参，下个月和上个月切换功能也只要切换参数就可以。
切换上个月或者下个月，只要把对应的年份、月份、日子传到下方渲染的公用方法里即可。

注意点：

这个其实本身是一个很简单的功能，在开发的时候只要细心点，关注一下month，因为在loadCalender方法中，将每个月的日子放入数组里面，数组是从0开始的，月份则是从1 。然后在传数据的时候要求month是从1开始的，所以只要细心关注一下这里，就没有什么问题了。

效果图：

代码：

DOM结构
 <div class="calendar">
            <!--上下月箭头切换+日历头-->
            <div class="calendar__header">
                <span @click="handlePreMonth"><</span>
                <span>{
   {
   year}}年{
   {
   month}}月{
   {
   day}}日</span>
                <span @click="handleNextMonth">></span>
            </div>
            <!--整个日历区域-->
            <div class="calendar__main">
                <!--周一-周日展示-->
                <div class="main__block-head">
                    <span class="head-span" v-for="(item, index) in blockHead" :key="index">{
   {
   item}}</span>
                </div>
                <!--月份日期展示-->
                <div class="main__block">
                    <span class="head-span" v-for="(item, index) in totalCalenderList" :key="index" @click="handleDayClick(item)">
                        <span>{
   {
   item.content}}</span>
                        <span class="span-status" v-html="spanStatus(item)"></span>
                    </span>
                </div>
            </div>
        </div>```

data数据:

```php
data() {
   
        return {
   
            year: new Date().getFullYear(),