手撕日历组件之Vue2版

<div id="calendar">
  <!-- 标题 -->
  <div class="title">
    <div class="arrow" @click="changeMonth('pre')"> ? </div>
    <div class="year-month">
      <span>{{currentYear}}年{{currentMonth}}月</span>
    </div>
    <div class="arrow" @click="changeMonth('next')"> ? </div>
  </div>
  <!-- 星期行 -->
  <ul class="weekdays">
    <li v-for='(val,key) in weeks'>
      <span :style='chooseStyle(key)'>
        {{val}}
      </span>
    </li>
  </ul>
  <!-- 日期 -->
  <ul class="days">
    <li v-for='(val,key) in days'>
      <span :class='chooseClass(val.day)'>
        {{val.day.getDate()}}</span>
    </li>
  </ul>
</div>

    ul {
      list-style-type: none;
    }

    #calendar {
      width: 560px;
      margin: 10px auto;
      border-radius: 2px;
      border: 1px solid #ebedf0;
    }

    .title {
      font-size: 20px;
      letter-spacing: 3px;
      display: flex;
      justify-content: space-between;
      background-color: #1883d7;
      color: #ffffff;
    }

    .title .arrow {
      padding: 20px;
      cursor: pointer;
    }

    .year-month {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }

    .weekdays {
      margin: 0;
      padding: 10px 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    .weekdays li {
      display: inline-block;
      width: 13.6%;
      text-align: center;
    }

    .days {
      padding: 0;
      background: #ffffff;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      line-height: 80px;
    }

    .days li {
      display: inline-block;
      width: 80px;
      height: 80px;
      text-align: center;
    }

    .days li .active {
      display: block;
      width: 80px;
      background: #1883d7;
      color: #fff;
    }

    .days li .other {
      padding: 5px;
      color: gainsboro;
    }

    .days li:hover {
      background: #e1e1e1;
    }

  init(data) {
    let day;
    if (data) {
      day = new Date(data);
    } else {
      let now = new Date();
      day = new Date(this.formDate(now.getFullYear(), now.getMonth() + 1, 1));
    } this.currentDay = day.getDate();
    this.currentYear = day.getFullYear();
    this.currentMonth = day.getMonth() + 1;
    this.currentWeek = day.getDay();
    if (!this.currentWeek) {
      this.currentWeek = 7;
    } this.days.length = 0;
    let str = this.formDate(
      this.currentYear,
      this.currentMonth,
      this.currentDay
    );
    for (let i = 2 - this.currentWeek; i < 37 - this.currentWeek; i++) {
      let d = new Date(str);
      d.setDate(i);
      this.days.push({
        day: d
      });
    }// //获取上月末至本月第一天的日期
    // for (let i = this.currentWeek - 1; i >= 0; i--) {
    // let d = new Date(str);
    // d.setDate(d.getDate() - i);
    // this.days.push({
    // day: d
    // });
    // }
    // //获取剩余的日期
    // for (let i = 1; i <= 42 - this.currentWeek; i++) {
    // let d = new Date(str);
    // d.setDate(d.getDate() + i);
    // this.days.push({
    // day: d
    // });
    // }
  },
  //其他月加class名'other'，今天加class名'active'
  chooseClass(day) {
    if (day.getMonth() + 1 != this.currentMonth) return "other";
    let a = new Date() - day;
    if (a > 0 && a < 86400000) return "active";
  },
  //改变周六日显示颜色
  chooseStyle(key) {
    if (key === 5 || key === 6) return "color:#282c34;font-weight: bold;";
  },
  //切换月份
  changeMonth(a) {
    let d = new Date(this.formDate(this.currentYear, this.currentMonth, 1));
    // setDate(0); 上月最后一天
    // setDate(-1); 上月倒数第二天
    // setDate(n) 参数n为 上月最后一天的前后n天
    a === "pre" ? d.setDate(0) : d.setDate(42);
    this.init(this.formDate(d.getFullYear(), d.getMonth() + 1, 1));
  },
  //返回字符串个格式的日期
  formDate(year, month, day) {
    return year + "-" + month + "-" + day;
  }

currentDay: null,
currentMonth: null,
currentYear: null,
currentWeek: null,
weeks: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
days: [],