在上次封装的日历组件的基础上，我们完善下，在月份变化后，返回到当前月份的的当天日期的显示。

效果展示

代码逻辑

• 高亮的UI样式美化

.calendar-day {color: #d7d7d7;width: 100px;line-height: 80px;text-align: center;box-sizing: border-box;cursor: pointer;position: relative;&.current {color: #333;}&.today {color: #fff;background-color: red;}&.isCurrent {/* color: #333; */border: 1px solid red;}&-rest {position: absolute;width: 20px;height: 20px;line-height: 20px;background-color: rgb(117, 117, 117);color: #fff;border-radius: 50%;font-size: 12px;top: 20px;}&-today {}
}

• 核心脚本逻辑代码

handleClick(now) {const lists = this.daysLists.flat();lists.forEach((item) => {if (now == item) {this.$set(item, "isCurrent", true);} else {this.$set(item, "isCurrent", false);}});this.daysLists = this.changDataList(lists);
},
handleBackToday() {this.year = dayjs().format("YYYY");this.month = dayjs().format("M");this.getDateLists();
},

计算出当前年月，更新当前年和月，然后再执行一次当前月的日历时间计算。这样就可以实现点击回到今天就能跳转到今天的月份。