Vue 3日历组件通过ref管理选中日期、v-for渲染格子并绑定@click事件、:class动态控制高亮样式实现点击与高亮；需用isSameDay标准化日期比较，避免时区或时间差异导致失效。
在 Vue 3 中实现日历组件的日期点击与高亮，核心是：用响应式数据记录选中日期、为每个日期格子绑定 @click 事件、通过动态 class 控制高亮样式。
1. 定义选中日期状态
使用 ref 或 reactive 管理当前选中日期（支持单选或范围选择）：
import { ref } from 'vue'
// 单选场景：存储 Date 实例或 YYYY-MM-DD 字符串
const selectedDate = ref(null) // 初始未选中
// 多选/范围选中可改为数组
// const selectedDates = ref([])
2. 渲染日期格子并绑定点击事件
假设你用循环渲染当月所有日期（含上月/下月补位），每个 <td> 或 <div> 格子需：
- 显示对应日期（如
2024-05-15） - 绑定
@click，将该日期赋值给selectedDate - 通过
:class判断是否为当前选中项
示例模板片段：
立即学习“前端免费学习笔记（深入）”；
<div v-for="day in calendarDays" :key="day.date"
:class="{ 'date-selected': isSameDay(day.date, selectedDate) }"
@click="selectedDate = day.date">
{{ day.text }}
</div>
其中 isSameDay 是一个工具函数，用于忽略时分秒比较日期是否相同：
const isSameDay = (date1, date2) => {
if (!date1 || !date2) return false
return (
new Date(date1).toDateString() === new Date(date2).toDateString()
)
}
3. 添加高亮样式
在 CSS 中定义 .date-selected 类，例如：
.date-selected {
background-color: #409eff;
color: white;
border-radius: 50%;
}
注意：确保该样式优先级足够，不被日历默认样式覆盖；若用 CSS Modules 或 scoped，需正确导出或穿透。
4. 可选增强：支持取消选中与键盘导航
- 点击已选中的日期时设为
null，实现“再点取消” - 添加
@keydown.enter支持回车触发选中（提升无障碍体验） - 配合
focus状态做键盘焦点高亮，便于 tab 导航
例如：
@click="selectedDate = selectedDate === day.date ? null : day.date"
不复杂但容易忽略细节：日期比较必须标准化（推荐转成 YYYY-MM-DD 字符串或用 toDateString()），避免因时区或时间部分不同导致高亮失效。
