【vue2】封装自定义的日历组件(三)之基础添加月份的加减定位到最新月份的第一天

我们在切换月份的时候，希望高亮显示在每个月的第一天上面，这样的效果我们要怎么来实现，其实也很简单，我们先看下实现的效果

实现效果

代码实现

原理就是获取到每月的第一天日期，然后再跟整个的数据进行对比，添加高亮的css样式即可

handleMinusMonth() {if (this.month == 1) {this.year--;this.month = 12;} else if (this.month > 12) {this.year++;this.month = 1;} else {this.month--;}this.getDateLists();this.getFirstDay();
},
handleAddMonth() {if (this.month == 12) {this.year++;this.month = 1;} else if (this.month < 1) {this.year--;this.month = 12;} else {this.month++;}this.getDateLists();this.getFirstDay();
},
// 核心逻辑代码
getFirstDay() {// 计算当前月的第一天，添加高亮样式const firstDay = dayjs(`${this.year}-${this.month}`).startOf("month").format("YYYY-MM-DD");this.daysLists = this.daysLists.flat().map((item) => {if (item.date == firstDay) {this.$set(item, "isCurrent", true);}return item;});const lists = this.daysLists.flat().map((item) => {if (item.date == firstDay) {this.$set(item, "isCurrent", true);}return item;});this.daysLists = this.changDataList(lists);
},

重新计算每次切换后年月的第一天，然后再把数据进行flat后，对比，当前的高亮状态为true,否则为false,数据格式可以自行处理。