VUE篇之日历组件

1.简单日历组件展示

思路：根据当前月的第一天是星期几，来显示日期

2.日历组件增强版------带有上个月或者下个月日期

较比上一版本，这个版本多了2个方法，主要用于更新上个月剩余日期，以及下个月最新日期

上个月日期：

// 获取上个月剩余天数
    getPreMonthDays() {
      if (this.firstDay == 1) return; //表示上个月无剩余天数
      let month = this.curMonth;
      let year = this.curYear;
      month--;
      if (month == 0) {
        year--;
        month = 12;
      }
      // 获取上个月的天数
      const days = moment(`${year}-${month}`).daysInMonth();
      this.preDays = days;
    },

 下个月日期：

// 获取下个月要显示的天数
    getNextMonthDays() {
      let month = this.curMonth;
      let year = this.curYear;
      // 获取当月最后一天是星期几
      const lastDay = moment(`${year}-${month}`).endOf('month').day();
      this.nextDays = lastDay == 0 ? 7 : lastDay;
      if (lastDay == 7) return;
    }

 整体代码：

3.日历组件增强版------可选择日期

未完待续