Vue日历插件

<template>
  <div class="page">
    <div class="calendar">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          border: 1px solid rgb(246, 247, 256);
        "
      >
        <!-- <span
          style="font-size: 30px; margin-left: 50px; cursor: pointer"
          @click="prevDayclick(1)"
        >
        </span> -->
        <li class="header" style="justify-content: center">
          {{ currentYear + "年" + (currentMonth + 1) + "月" }}
        </li>
        <!-- <span
          style="font-size: 30px; margin-right: 50px; cursor: pointer"
          @click="nextDayclick(1)"
          >></span
        > -->
      </div>
      <li class="week">
        <div>一</div>
        <div>二</div>
        <div>三</div>
        <div>四</div>
        <div>五</div>
        <div style="color: red">六</div>
        <div style="color: red">日</div>
      </li>
      <li class="row day">
        <span
          @click="prevDayclick(item)"
          class="date prevDay"
          v-for="item in prevDays"
          :key="'A' + item"
          >{{ item }}</span
        >
        <span
          @click="clickdate(item)"
          v-for="item in currentDays"
          :key="'B' + item"
          class="date nowm"
          :class="{
            jintian: currentDay == item,
          }"
          >{{ item }}</span
        >
        <span
          @click="nextDayclick(item)"
          class="date prevDay"
          v-for="item in nextDays"
          :key="'A' + item"
          >{{ item }}</span
        >
      </li>
    </div>
  </div>
</template>

<script>
export default {
  name: "Calender",
  props: {
    month: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      week: ["日", "一", "二", "三", "四", "五", "六"],
      currentDay: new Date().getDate(),
      currentDay2: new Date().getDate(),
      currentMonth: this.month - 1,
      currentYear: new Date().getFullYear(),
    };
  },
  computed: {
    currentMonthChinese() {
      return new Date(this.currentYear, this.currentMonth).toLocaleString(
        "default",
        { month: "short" }
      );
    },
    currentDays() {
      return new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
    },
    prevDays() {
      let data = new Date(this.currentYear, this.currentMonth, 0).getDate();
      let num = new Date(this.currentYear, this.currentMonth, 0).getDay();
      const days = [];
      while (num > 0) {
        days.push(data--);
        num--;
      }
      return days.sort();
    },
    nextDays() {
      const m = this.currentMonth + 1;
      let num = new Date(this.currentYear, m, 1).getDay();
      const days = [];
      let number = 0;
      let totalLenght = this.currentDays + this.prevDays.length;
      if (totalLenght > 28 && totalLenght <= 33) {
        while (num < 15) {
          number++;
          days.push(number);
          num++;
        }
      } else {
        while (num < 8) {
          number++;
          days.push(number);
          num++;
        }
      }
      return days.sort();
    },
    zongdate() {
      return (
        this.currentYear + "-" + (this.currentMonth + 1) + "-" + this.currentDay
      );
    },
  },
  methods: {
    clickdate(val) {
      this.currentDay = val;
      if (
        this.currentMonth === new Date().getMonth() &&
        this.currentDay !== new Date().getDate()
      ) {
        document.getElementsByClassName("nowm")[
          this.currentDay2 - 1
        ].style.color = "#3F62AE";
      }
    },
    prevDayclick(val) {
      this.currentDay = val;
      this.currentMonth = Number(this.currentMonth) - 1;
      document.getElementsByClassName("nowm")[
        this.currentDay2 - 1
      ].style.color = "black";
      if (this.currentMonth < 0) {
        this.currentMonth = 11;
        this.currentYear = Number(this.currentYear - 1);
      }
    },
    nextDayclick(val) {
      this.currentDay = val;
      this.currentMonth = Number(this.currentMonth) + 1;
      document.getElementsByClassName("nowm")[
        this.currentDay2 - 1
      ].style.color = "black";
      if (this.currentMonth > 11) {
        this.currentMonth = 0;
        this.currentYear = Number(this.currentYear + 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.calendar {
  width: 320px;
  position: relative;

  .header {
    width: 100%;
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 15px;
    padding-top: 10px;
  }
  .week {
    display: flex;
    height: 30px;
    background: #fefefe;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #404040;
    div {
      width: calc(100% / 7);
      text-align: center;
      height: 30px;
      border: 1px solid rgb(246, 247, 256);
    }
  }
  .row {
    width: 100%;
  }
  .day {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 12px;
    display: flex;

    span {
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid rgb(246, 247, 256);
    }
    .date {
      display: flex;
      width: calc(100% / 7);
      justify-content: center;
      align-items: center;
      height: 40px;
      line-height: 40px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: black;
    }
    .nowDay {
      background: #404040;
    }
  }
}
.prevDay {
  color: #ccc !important;
}
</style>