移动端使用vue封装日历

1.首先根据头部导航显示历史的六天时间，旁边点击日历icon出现日历组件

2.日历页面显示两个月份，当前月及上月，我这里将日历分为了三块：上月，中间月，下月。
日历组件index.vue：

<template>
  <div id="calendar">
      <calendarHeader 
      @handlePrevMonth = 'getPrevMonth'
      @handleNextMonth = 'getNextMonth'
      @handleToday = 'handleToday'
      @selectDate = 'selectDate'
      @cancle="cancle"
    />
    <div class="date-title" >
      <div>日</div>
      <div>一</div>
      <div>二</div>
      <div>三</div>
      <div>四</div>
      <div>五</div>
      <div>六</div>
    </div>
    
    <div class="calendar-container"  style="height:36rem;" v-on:scroll="scrollDebounce">
        <!-- 上一个月 'signBg':sign==i -->
      <div class="date-container premonth">
        <div class="date-header">{
   {
    `${
     preDivCalendar.year}年${
     preDivCalendar.month}月` }}</div>
        <div class="date-board">
          <!-- 判断某月的第一天是星期几 start -->
          <div v-for="i in new Date(preDivCalendar.year, (preDivCalendar.month-1), 1).getDay()" :key="-i"></div>
          <!-- 判断某月的第一天是星期几 end -->
          <div class="date-block"
                :class=" {
   
                  'todayBlock': isCurrentDay(i,preDivCalendar.month,preDivCalendar.year),
                  'futureBg':isFutureDay(i,preDivCalendar.month,preDivCalendar.year),
                  'signBg':isSignBg(i,preDivCalendar.month,preDivCalendar.year),
                }"
                @click="handleClickDay(i,preDivCalendar.month,preDivCalendar.year)"
               v-for="i in preCalendarList"
               :key="i">
            <span class="solar">{
   {
    i }}</span>
            <p class="lunar" :class="{
   
              'signBg':isSignBg(i,preDivCalendar.month,preDivCalendar.year),
              'futureBg':isFutureDay(i,preDivCalendar.month,preDivCalendar.year),
              }">{
   {
   preLunarList[i]}}</p>
            <span  :class="{
   
              'no-report-status':isHistory(i,preDivCalendar.month,preDivCalendar.year),
              'reported-status':isReported(i,preDivCalendar.month,preDivCalendar.year)
              }"></span>
          </div>
        </div>
      </div>
      <!-- 中间一个月 -->
      <div class="date-container middlemonth">
        <div class="date-header">{
   {
    `${
     middleDivCalendar.year}年${
     middleDivCalendar.month}月` }}</div>
        <div class="date-board">
          <!-- 判断某月的第一天是星期几 start -->
          <div v-for="i in new Date(middleDivCalendar.year, (middleDivCalendar.month-1), 1).getDay()" :key="-i"></div>
          <!-- 判断某月的第一天是星期几 end -->
          <div class="date-block"
               :class="{
   
                 'todayBlock': isCurrentDay(i,middleDivCalendar.month,middleDivCalendar.year),
                 'futureBg':isFutureDay(i,middleDivCalendar.month,middleDivCalendar.year),
                 'signBg':isSignBg(i,middleDivCalendar.month,middleDivCalendar.year),
                 'selectBg':isSelectDay(i,middleDivCalendar.month,middleDivCalendar.year)
                 }"
               @click="handleClickDay(i, middleDivCalendar.month,middleDivCalendar.year)"
               v-for="i in currentCalendarList"
               :key="i">
            <span class="solar">{
   {
    i }}</span>
            <p class="lunar" :class="{
   
              'signBg':isSignBg(i,middleDivCalendar.month,middleDivCalendar.year),
              'futureBg':isFutureDay(i,middleDivCalendar.month,middleDivCalendar.year),
              }">{
   {
   currentLunarList[i]}}</p>
            <span :class="{
   
              'no-report-status':isHistory(i,middleDivCalendar.month,middleDivCalendar.year),
              'reported-status':isReported(i,middleDivCalendar.month,middleDivCalendar.year)
              }"></span>
            
          </div>
        </div>
      </div>
      <!-- 下一个月 :class="{todayBlock: i === 1}" -->
      <div class="date-container nextmonth">
        <div class="date-header">{
   {
    `${
     nextMiddleDivCalendar.year}年${
     nextMiddleDivCalendar.month}月` }}</div>
        <div class="date-board">
          <!-- 判断某月的第一天是星期几 start -->
          <div v-for="i in new Date(nextMiddleDivCalendar.year, (nextMiddleDivCalendar.month-1), 1).getDay()" :key="-i"></div>
          <!-- 判断某月的第一天是星期几 end -->
          <div class="date-block"
                :class="{
   
                  'todayBlock': isCurrentDay(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
                  'futureBg':isFutureDay(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
                  'signBg':isSignBg(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
                  }"
                @click="handleClickDay(i, nextMiddleDivCalendar.month,nextMiddleDivCalendar.year)"
               v-for="i in nextCalendarList"
               :key="i">
            <span class="solar">{
   {
    i }}</span>
            <p class="lunar" :class="{
   
              'signBg':isSignBg(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
              'futureBg':isFutureDay(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year)
            }">{
   {
   nextLunarList[i]}}</p>
            <span :class="{
   
              'no-report-status':isHistory(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year),
              'reported-status':isReported(i,nextMiddleDivCalendar.month,nextMiddleDivCalendar.year)
            }"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

日历组件的JavaScript，显示的农历有些问题待更新，显示农历的方法在百度上面有很多，大家可以结合我的去调整。

export default {
   
    components: {
   
        calendarHeader
    },
    props:{
   
      middleDate:{
   
        type:Object
      },
      unitProjectId:{
   
        type:Number
      }
    },
    data () {
   
      return {
   
        scrollTimer: null, // 滚动定时器，用于滚动事件防抖动
        // preDivCalendar: {year: new Date().getFullYear(), month: new Date().getMonth()}, // 第一个div显示的日历
        // middleDivCalendar: {year: new Date().getFullYear(), month: new Date().getMonth()+1}, // 中间div显示的日历
        // nextMiddleDivCalendar: {year: new Date().getFullYear(), month: new Date().getMonth()+2}, // 最后一个div显示的日历
        preDivCalendar: {
   }, // 第一个div显示的日历
        middleDivCalendar: {
   }, // 中间div显示的日历
        nextMiddleDivCalendar: {
   }, // 最后一个div显示的日历
        preCalendarList:[],
        currentCalendarList:[],
        nextCalendarList:[],
        selectDay:{
   },
        clickDay:{
   },
        dailyCalendarStatusList:[],
        dailyReportStatusList:[],
        preLunarList:[],//上月农历日期
        currentLunarList:[],//中间农历日期
        nextLunarList:[],//下月农历日期
      }
    },
    created(){
   
      this.preDivCalendar = {
   year: this.middleDate.year, month: this.middleDate.month-1}
      this.middleDivCalendar = {
   year: this.middleDate.year, month: this.middleDate.month};
      // this.middleDivCalendar = this.middleDate;
      this.nextMiddleDivCalendar = {
   year: this.middleDate.year, month: this.middleDate.month+1}
      this.handleClickDay1(this.middleDate.date,this.middleDate.month,this.middleDate.year)
      
      this.preCalendarList = this.getMonthDayByMonthYear(this.preDivCalendar.month, this.preDivCalendar.year)
      this.currentCalendarList = this.getMonthDayByMonthYear (this.middleDivCalendar.month, this.middleDivCalendar.year)
      this.nextCalendarList = this.getMonthDayByMonthYear (this.nextMiddleDivCalendar.month, this.nextMiddleDivCalendar.year)

    
    },
    mounted () {
   
      // this.middleDivCalendar = {year: new Date().getFullYear(), month: new Date().getMonth()+1}
      // this.middleDivCalendar = {year: this.middleDate.year, month: this.mi