vue—日历组件

<template>
  <!-- 日历组件 -->
  <div class="calender">
    <div class="date-header">
      <!-- 切换日期按钮 -->
      <div class="btn-month">
        <div>
          <button @click="handleYear(-1)">&lt;&lt;</button>
          <button @click="handlePrev">&lt;</button>
        </div>
        <div>
          <button @click="handleNext">&gt;</button>
          <button @click="handleYear(1)">&gt;&gt;</button>
        </div>
      </div>
      <div class="show-date">{{ year }}年{{ month }}月{{ day }}日</div>
    </div>
    <div class="date-content">
      <div class="week-header">
        <div
          v-for="item in ['日', '一', '二', '三', '四', '五', '六']"
          :key="item"
        >
          {{ item }}
        </div>
      </div>
      <div class="week-day">
        <div :class="arr.indexOf(item-beginDay())!=-1?'every-day dian':'every-day' " v-for="item in 42" :key="item" >
          <!-- 当月 -->
          <div
            :class="active == item - beginDay() ? 'active' : '' "
            v-if="item - beginDay() > 0 && item - beginDay() <= prevDays(0)"
            @click="chack(item - beginDay())"
          >
            {{ item - beginDay() }}
          </div>
          <!-- 上月 -->
          <div class="other-day" v-else-if="item - beginDay() <= 0" @click="handlePrev">
            {{ item - beginDay() + prevDays(1) }}
          </div>
          <!-- 下月 -->
          <div class="other-day" v-else @click="handleNext">
            {{ item - beginDay() - prevDays(0) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
    arr:[1,2,3],
      active: null,
      year: null,
      month: null,
      day: null,
      curDate: null,
      nextDay: 0,
    };
  },
  created() {
    this.getInitDate();
    console.log(this.prevDays());
  },
  methods: {
    getInitDate() {
      const date = new Date();
      this.year = date.getFullYear();
      this.month = date.getUTCMonth() + 1;
      this.day = date.getDate();
      this.curDate = `${this.year}-${this.month}-${this.day}`;
    },
    //获取1号开始位置
    beginDay() {
      return new Date(this.year, this.month - 1, 1).getDay();
    },
    // 获取某月天数
    prevDays(e) {
      return new Date(this.year, this.month - e, 0).getDate();
    },
    handlePrev() {
      this.active = null;
      if (this.month == 1) {
        this.month = 12;
        this.year--;
      } else {
        this.month--;
      }
    },
    handleNext() {
      this.active = null;
      if (this.month == 12) {
        this.month = 1;
        this.year++;
      } else {
        this.month++;
      }
    },
    handleYear(e) {
      this.active = null;
      this.year += e;
    },
    chack(e) {
      console.log(e);
      //车辆轨迹模拟数据
      let carList=["113.332321,23.136581","113.335648,23.137974","113.340012,23.138865"]
      this.$store.commit('chack_carTrajectory',carList)
      this.active = e;
    },
  },
};
</script>