vue移动端项目日历组件，月周切换，点击进入上/下一个月

项目场景：

Vue移动端项目的日历组件，移动端如果没有别的特别要求，一般用vant中的日历组件就OK，这里用的另一个。组件是网上找的，原网址：vue-hash-calendar，需要的请自行去看。

我用他的这个组件，实现的功能：点击进行月周切换，显示当前日期，左右滑动切换月/周，点击箭头切换月/周）。

---

项目效果：

---

解决方案：

< template >中的代码。

<div>
  <div>每日记录</div>
  <img class="iconLeft" @click="lastMonth" :src="iconLeft" alt="">
  <span class="nowDate">{{this.date}}</span>
  <img class="iconRight" @click="nextMonth" :src="iconRight" alt="">
  <vue-hash-calendar class="vue-hash-calendar" visible :defaultDatetime="defaultDatetime" isShowArrow :isShowAction="false" @click="seleteDate" @change="changeDate"></vue-hash-calendar>
  <div v-if="hasTrack">
    <!-- 调用的其他组件 -->
    <h-step /> 
  </div>
  <div v-else>
    <img class="empty" :src="empty" alt="">
    <div class="emptyText">暂无数据</div>
  </div>
</div>

< script>中的代码。

<script>
import { Toast } from 'vant';
import dayjs from 'dayjs';
Toast.setDefaultOptions({ duration: 1000 });
export default {
  data() {
    return {
      date: "",
      iconLeft: require("../../../assets/images/left.png"),
      iconRight: require("../../../assets/images/right.png"),
      empty: require("../../../assets/images/empty.png"),
      hasTrack: true,
      defaultDatetime: new Date(dayjs().format('YYYY-MM-DD')), // 默认日期
    };
  },
  methods:{
    // 点击箭头到上一个月
    lastMonth(){
      this.defaultDatetime = new Date(dayjs(this.date).subtract('1', 'month'));
    },
    // 点击箭头到下一个月
    nextMonth(){
      this.defaultDatetime = new Date(dayjs(this.date).add('1', 'month'));
    },
    // 日期变化时触发，把当前选择的时间显示到界面
    changeDate(date){
      this.date = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    // 鼠标选中的日期触发，判断是否选择了未来时间并给出提示
    seleteDate(date){
      let clickDate=dayjs(date).format('YYYY/M/D'); // 鼠标选中的时间
      if ( dayjs(clickDate).isAfter(dayjs(dayjs(), "day")) ){
        Toast("不能选择未来时间!");
      }
      // 判断当前日期是否有轨迹
      if (this.date === "2021/6/9"){
        this.hasTrack=false;
      } else {
        this.hasTrack=true;
      }
    },
  },
};
</script>