vue写简单的日历 以及上下周的切换

<template>
  <div class="calender">
    <div class="box">
      <div class="year">
        <div class="preMonth" @click="handlePrev">preMonth</div>
        <div class="currentMonth">{{year}}-{{month}}</div>
        <div class="nextMonth" @click="handleNext">nextMonth</div>
      </div>

      <ul class="day">
        <li class="week" v-for="(item,index) in weekList" :key="index">{{item}}</li>
      </ul>
      <div class="days">
        <div class="item" v-for="(item,index) in 42" :key="index">
          <div class="lastMonth" v-if="item-beginDay<=0">{{prevMonthDays-beginDay+item}}</div>
          <div
            v-else-if="item-beginDay>currentMonthDays"
            class="nextMonth"
          >{{item-beginDay-currentMonthDays}}</div>
          <div v-else :class="['currentMonth',{active:currentDay==item-beginDay}]">{{item-beginDay}}</div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="year">
        <div class="preMonth" @click="handlePrevWeek">preWeek</div>
        <div class="currentMonth">{{todayDate}}</div>
        <div class="nextMonth" @click="handleNextWeek">nextWeek</div>
      </div>
      <ul class="day">
        <li class="week" v-for="(item,index) in weekList" :key="index">{{item}}</li>
      </ul>
      <div class="days">
        <div class="item" v-for="(item,index) in weekDayArr" :key="index">
          <span>{{item.adate}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: "",
      year: null,
      month: null,
      day: null,
      currentDay: null,
      todayDate: null,
      weekDayArr: [],
      currentFirstDate: "",
      clen: 7,
      lastDayList: [],
      dayList: [],
      nextDayList: [],
      weekList: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ]
    };
  },
  created() {
    this.getMonth();
    this.todayDate = this.formatDate(new Date());
    this.setDate(new Date());
  },
  computed: {
    currentMonthDays() {
      // 某月有多少天
      var currentDate = new Date(this.year, this.month, 0);
      var days = currentDate.getDate();
      return days;
    },
    prevMonthDays() {
      // 上一个月共有多少天
      return new Date(this.year, this.month - 1, 0).getDate();
    },
    beginDay() {
      // 某月一号是星期几
      return new Date(this.year, this.month - 1, 1).getDay();
    }
  },
  mounted() {},
  methods: {
    getMonth() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var week = date.getDay();
      this.year = year;
      this.month = month;
      this.day = day;
      this.week = week;
      this.currentDay = day;
      return (this.date = year + "-" + month + "-" + day);
    },
    // 日期格式处理
    formatDate(date) {
      var month = date.getMonth() + 1 + "月";
      var day = date.getDate() + "日";
      return month + day ;
    },
    addDate(date, n) {
      date.setDate(date.getDate() + n);
      return date;
    },

    setDate(date) {
      var week = date.getDay();
      date = this.addDate(date, week * -1);
      this.currentFirstDate = new Date(date);
      for (var i = 0; i < this.clen; i++) {
        this.weekDayArr.push({
          adate: this.formatDate(i == 0 ? date : this.addDate(date, 1))
        });
      }
    },
    handlePrev() {
      if (this.month === 1) {
        this.month = 12;
        this.year--;
      } else {
        this.month--;
      }
    },
    handleNext() {
      if (this.month === 12) {
        this.month = 1;
        this.year++;
      } else {
        this.month++;
      }
    },
    handlePrevWeek() {
        this.weekDayArr=[]
        this.setDate(this.addDate(this.currentFirstDate,-7)); 
    },
    handleNextWeek() {
        this.weekDayArr=[]
        this.setDate(this.addDate(this.currentFirstDate,7)); 
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../common/sass.scss";
@import "../../common/css/valender.scss";
.year {
  background: green;
  padding: pxToRem(10) 0;
  font-size: 0;
}
.year > div {
  font-size: pxToRem(16);
  color: #333;
  width: 30%;
  display: inline-block;
}
.day {
  width: pxToRem(700);
  font-size: 0;
  .week {
    width: pxToRem(100);
    display: inline-block;
    font-size: pxToRem(16);
    color: #333;
  }
}
.days {
  width: pxToRem(700);
  font-size: 0;
  .item {
    width: pxToRem(100);
    display: inline-block;
    font-size: pxToRem(16);
    color: #000;
    .lastMonth {
      color: #666;
    }
    .nextMonth {
      color: #666;
    }
    .active {
      color: red;
    }
  }
}
</style>

样式有点丑（主要写功能T_T）