标签：vue beginDay 日历 month active item year 组件 null

<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>

标签：vue,beginDay,日历,month,active,item,year,组件,null
来源： https://blog.csdn.net/weixin_61723598/article/details/122231362

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。