vue 简易的日历组件

<template>
  <div class="calender">
    <div class="cal-header">
      <span @click="month--">&lt;</span>
      <span>{{year}}年{{month}}月</span>
      <span @click="month++">&gt;</span>
    </div>
    <div class="cal-body">
      <div class="week-day">
          <div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div>
      </div>
      <div class="date-day">
        <div v-for="(item,key) in daysArr" :key="key"  
        :class="{'prev':item.type=='prev','current':item.type=='current','next':item.type=='next','currentDay':item.formatDate==today}">
            {{item.day}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "myCalender",
  data() {
    return {
        day:'',
        month:'',
        year:'',
        today:'',
        daysArr:[],
    };
  },
  mounted() {
      this._getCurrentDate()
  },
  methods: { 
    //获取当天日期年月 日
    _getCurrentDate(){
        let date = new Date()
        this.day = date.getDate()
        this.month = date.getMonth()+1
        this.year = date.getFullYear()
        this._getFirstDaysForMonth(this.year,this.month)
        this.today = this.formatDate(this.year,this.month,this.day)
        console.log(this.today);
    },
    //获取切换页月份第一天是周几与最后一天并获取月前与月后填补数组
    _getFirstDaysForMonth(year,month){
        //计算月份第一天是周几
        let weekdays = new Date(`${year}-${month}-01`).getDay()
        // if(weekdays==0){
        //     weekdays=6
        // }else{
        //     weekdays -=1
        // }
        let beforeMonthDaysArr = []
        let currentMonthDaysArr = []
        let afterMonthDaysArr = []
        //获取上一月总天数
        if(month){
            let temp=new Date(year,month-1,1);
            let day = new Date(temp.getTime() - 864e5).getDate();
            for(let i=0;i<day;i++){
            beforeMonthDaysArr.push({
                year:year,
                month:month - 1,
                day:i+1,
                type:'prev',
                formatDate:this.formatDate(year,month-1,i+1)
            })
            }
            beforeMonthDaysArr.splice(0,beforeMonthDaysArr.length-weekdays)
        }else{
            //12月
        }
        //获取当前月总天数
        let temp=new Date(year,month,1);
        let day = new Date(temp.getTime() - 864e5).getDate();
        let afterWeekdays = new Date(`${year}-${month}-${day}`).getDay()
        for(let i=0;i<day;i++){
            currentMonthDaysArr.push({
            year:year,
            month:month,
            day:i+1,
            type:'current',
            formatDate:this.formatDate(year,month,i+1)
            })
        }
         //获取下一月总天数
        if(beforeMonthDaysArr.length+currentMonthDaysArr.length+6-afterWeekdays===35){
            for(let i=0;i<13-afterWeekdays;i++){
            afterMonthDaysArr.push({
                year:year,
                month:month+1,
                day:i+1,
                type:'next',
                formatDate:this.formatDate(year,month+1,i+1)
            })
            }
        }else{
            for(let i=0;i<6-afterWeekdays;i++){
            afterMonthDaysArr.push({
                year:year,
                month:month+1,
                day:i+1,
                type:'next',
                formatDate:this.formatDate(year,month+1,i+1)
            })
            }
        }
        this.daysArr = [...beforeMonthDaysArr,...currentMonthDaysArr,...afterMonthDaysArr]
        console.log(this.daysArr);
        },
    formatDate(y,m,d){
         return `${y}-${m<10?'0'+m:m}-${d<10?'0'+d:d}`
    }
  },
   watch:{
    'month'(){
    if(this.month===0){
        this.month = 12
        this.year--
    }
    if(this.month===13){
        this.month = 1
        this.year++
    }
    this._getFirstDaysForMonth(this.year,this.month)
    }
  },
};
</script>
<style lang="less" scoped>
 .calender{
     width: 100%;
     height: calc(100% - 41px);
     border: 1px solid #307AD1;
     border-radius: 2px;
     .cal-header{
        padding: 4px;
        text-align: center;
        span{
            padding: 0 10px;
        }
     }
     .cal-body{
         height: calc(100% - 27px);
         .week-day{
             display: flex;
             background: #11335C;
             height: 35px;
             line-height: 35px;
             div{
                flex: 1;
                text-align: center;
             }
         }
         .date-day{
           display: grid;
           grid-template-columns:repeat(7,1fr);
           text-align: center;
           height: calc(100% - 35px);
            div{
              display: flex;
              justify-content: center;
              align-items: center;
            }
           .current{
              cursor: pointer;
           }
           .prev,.next{
               color: #22518d;
           }
           .currentDay{
               color: #00E4FF;
           }
         }
     }
 }
</style>