12、vue2写一个日历

工作中需要用到日历组件，但是antd不满足于业务需求，所以自己写了一个日历组件

<template>
  <div class="canlendar-right">
    <div>
      <span @click="handlePrev"><</span>{{ selectMonth }}
      <span @click="handleNext">></span>
    </div>
    <div class="week-header">
      <div v-for="item in weekData" :key="item">
        {{ item }}
      </div>
    </div>
    <div class="week-day">
      <div
        class="day"
        v-for="item in calendarArr"
        :key="item.value"
        @click="handleChangeCalendar(item)"
      >
        <span
          :class="[
            item.isNow ? 'currentDay' : 'otherDay',
            { active: item.value === selectDate },
          ]"
        >
          {{ item.label }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
const weekData = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
export default {
  data() {
    return {
      weekData,
      calendarArr: [],
      selectDate: moment().format('YYYY-MM-DD'),
    };
  },
  computed: {
    selectMonth() {
      return moment(this.selectDate).format('YYYY-MM');
    },
    //获取当月第一天是星期几
    beginDay() {
      // return new Date(this.year, this.month - 1, 1).getDay();
      let date = new Date(this.selectMonth);
      date.setMonth(date.getMonth(), 1);
      return date.getDay();
    },
    //获取当月最后一天
    curDays() {
      let date = new Date(this.selectMonth);
      date.setMonth(date.getMonth() + 1, 0);
      return date.getDate();
    },
    //获取上月最后一天
    prevDays() {
      let date = new Date(this.selectDate);
      date.setDate(0);
      return date.getDate();
    },
  },
  mounted() {
    this.getInitDate();
  },
  methods: {
    handlePrev() {
      this.selectDate = moment(this.selectDate)
        .subtract(1, 'month')
        .format('YYYY-MM-DD');
      this.getInitDate();
    },
    handleNext() {
      this.selectDate = moment(this.selectDate)
        .add(1, 'month')
        .format('YYYY-MM-DD');
      this.getInitDate();
    },
    getInitDate() {
      let calendarArr = new Array(42);
      this.calendarArr = [];
      const date = new Date(this.selectDate);
      this.year = date.getFullYear();
      this.month = date.getUTCMonth() + 1;
      this.day = date.getDate();
      console.log(this.year, this.month, this.day, this.beginDay);
      for (let i = 1; i <= 42; i++) {
        if (i - this.beginDay > 0 && i - this.beginDay <= this.curDays) {
          calendarArr[i] = {
            label: i - this.beginDay,
            value: moment(
              `${this.year}-${this.month}-${i - this.beginDay}`
            ).format('YYYY-MM-DD'),
            isNow: true,
          };
        } else if (i - this.beginDay <= 0) {
          let year = this.year;
          let month = this.month - 1;
          if (this.month === 1) {
            year = year - 1;
            month = 12;
          }
          calendarArr[i] = {
            label: i - this.beginDay + this.prevDays,
            value: moment(
              `${year}-${month}-${i - this.beginDay + this.prevDays}`
            ).format('YYYY-MM-DD'),
          };
        } else {
          let year = this.year;
          let month = this.month + 1;
          if (this.month === 12) {
            year = year + 1;
            month = 1;
          }
          calendarArr[i] = {
            label: i - this.beginDay - this.curDays,
            value: moment(
              `${year}-${month}-${i - this.beginDay - this.curDays}`
            ).format('YYYY-MM-DD'),
          };
        }
      }
      this.calendarArr = calendarArr.filter((v) => v.label);
      console.log('11', this.calendarArr);
    },
    handleChangeCalendar(item) {
      this.selectDate = item.value;
    },
  },
};
</script>

<style scoped>
.canlendar-right {
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.week-header {
  color: #4e5969;
  font-size: 14px;
  text-align: center;
  width: 100%;
  display: flex;
  margin: 20px 0 9px 0;
}
.week-header div {
  width: 100px;
}
.week-day {
  width: 400px;
  border-right: 1px solid #e0e4ed;
  border-bottom: 1px solid #e0e4ed;
  display: flex;
  flex-wrap: wrap;
}
.day {
  height: 55px;
  width: 55px;
  text-align: center;
  line-height: 50px;
  border-left: 1px solid #e0e4ed;
  border-top: 1px solid #e0e4ed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.currentDay {
  color: #1d2129;
  font-size: 16px;
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  margin-top: 10px;
}
.otherDay {
  color: #c9cdd4;
  font-size: 16px;
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  margin-top: 10px;
}
.active {
  border-radius: 50%;
  background: #0147eb;
  color: #fff;
}
.task-height {
  width: 100%;
  height: 20px;
  background: rgba(233, 247, 255, 0.6);
  border-top: 2px solid rgba(24, 144, 255, 1);
  position: relative;
}
.task-height span {
  position: absolute;
  top: -39px;
  transform: translateX(-50%);
  display: inline-block;
  width: 100%;
  text-align: center;
  font-weight: 400;
  font-size: 12px;
  color: #5698d6;
  font-family: MiSans-Normal;
}
.over-load {
  background: rgba(255, 242, 232, 1);
  border-top: 2px solid rgba(255, 122, 69, 1);
}
.over-load span {
  color: #fa8c16;
}
</style>

效果如图：

image.png