vue3节假日日历组件

### Vue3 节假日日历组件示例 为了创建一个适用于Vue3的节假日日历组件，可以基于现有的日历组件库并扩展其功能来支持节假日显示。这里提供一种方法，通过自定义`CalendarComponent`以适应特定需求。 #### HTML结构与样式引入 首先，在HTML文档中确保已正确加载所需的资源文件： ```html <!-- 引入外部CSS用于美化 --> <link rel="stylesheet" href="./assets/style.css"> ``` #### 定义组件模板 接着设计组件的基础布局，允许用户查看日期的同时也能识别出哪些日子是法定假期： ```vue <template> <div class="calendar-wrapper"> <!-- 显示月份和年份 --> <header> {{ currentMonth }}/{{ currentYear }} </header> <!-- 周标签 --> <ul class="weekdays"> <li v-for="(day, index) in weekDays" :key="index">{{ day }}</li> </ul> <!-- 月视图中的天数 --> <ul class="dates"> <li v-for="(date, idx) in datesOfMonth" :class="{ holiday: isHoliday(date), today: date.isToday }" @click="selectDate(date)"> {{ date.day }} </li> </ul> </div> </template> ``` #### JavaScript逻辑处理 随后编写相应的脚本部分，负责渲染日历以及判断某一天是否属于节日列表之一： ```javascript <script setup lang="ts"> import { ref, computed, onMounted } from 'vue'; // 导入假数据源或其他API获取方式 import holidaysData from '@/data/holidays.json'; const props = defineProps({ selectedDate: { type: Object, default() { return new Date(); } }, }); let currentDate = ref(new Date()); function getWeekDays(locale='en-US') { const daysOfWeek = []; let dt = new Date(currentDate.value); for (let i=0; i<=6; ++i){ dt.setDate(dt.getDate()-dt.getDay()+i); // 设置为本周的第一天起始 daysOfWeek.push({name:new Intl.DateTimeFormat(locale,{weekday:'short'}).format(dt)}); } return daysOfWeek; } const weekDays = computed(() => getWeekDays()); function generateDatesInCurrentMonth(){ const startDay = new Date(currentDate.value.getFullYear(),currentDate.value.getMonth(),1).getDay(), endDay = new Date(currentDate.value.getFullYear(),currentDate.value.getMonth()+1,0).getDate(); const result=[]; for(let d=startDay;d>0;d--)result.unshift({...createEmptyDate()}); for(let d=1;d<=endDay;d++)result.push(createFullDate(d)); while(result.length%7!==0)result.push({...createEmptyDate()}); function createEmptyDate(){return{day:'',isToday:false};} function createFullDate(day){return{day,isToday:(new Date()).toDateString()===(new Date(currentDate.value)).setDate(day).toDateString()}} return result; }; const datesOfMonth=computed(()=>generateDatesInCurrentMonth()); function selectDate(dateObj){ console.log(`Selected ${JSON.stringify(dateObj,null,' ')}`); } function isHoliday(checkingDate){ const checkingStr=`${checkingDate.year}-${String(checkingDate.month+1).padStart(2,"0")}-${String(checkingDate.day).padStart(2,"0")}`; return !!holidaysData.find(holiday=>holiday.date===checkingStr); }; </script> ``` 此代码片段实现了基本的日历展示，并能够标记出预设好的节假日[^1]。对于实际应用而言，建议从服务器动态拉取最新的节假日信息而不是硬编码在前端代码里。