以下是一个基于 vue 3 实现的简单日历组件的代码示例。这个日历组件包含了前一个月、当前月、下一个月的日期，并且可以支持选择日期、切换月份等功能。
<template> <div class="calendar"> <div class="header"> <button class="prev" @click="prevmonth">&lt;</button> <div class="title">{{ title }}</div> <button class="next" @click="nextmonth">&gt;</button> </div> <div class="weekdays"> <div v-for="day in daysofweek" :key="day" class="day">{{ day }}</div> </div> <div class="days"> <div v-for="day in days" :key="day.date" :class="{ today: istoday(day), selected: isselected(day), notcurrentmonth: isnotcurrentmonth(day), }" @click="select(day)" > {{ day.day }} </div> </div> </div></template><script> import { ref, computed } from "vue"; export default { name: "feicalendar", props: { selecteddate: date, }, emits: ["update:selecteddate"], setup(props, { emit }) { const weekdays = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"]; const currentdate = ref(new date()); const selecteddate = ref(props.selecteddate || currentdate.value); const daysofweek = computed(() => { return weekdays; }); const days = computed(() => { const year = currentdate.value.getfullyear(); const month = currentdate.value.getmonth(); const daysinmonth = new date(year, month + 1, 0).getdate(); const daysinlastmonth = new date(year, month, 0).getdate(); const firstdayofmonth = new date(year, month, 1).getday(); const days = []; let day = 1; let lastmonthday = daysinlastmonth - firstdayofmonth + 1; let nextmonthday = 1; for (let i = 0; i < 6 * 7; i++) { if (i < firstdayofmonth) { days.push({ date: new date(year, month - 1, lastmonthday), day: lastmonthday, islastmonth: true, isnextmonth: false, }); lastmonthday++; } else if (i >= firstdayofmonth + daysinmonth) { days.push({ date: new date(year, month + 1, nextmonthday), day: nextmonthday, islastmonth: false, isnextmonth: true, }); nextmonthday++; } else { const date = new date(year, month, day); days.push({ date, day, islastmonth: false, isnextmonth: false }); day++; } } return days; }); const title = computed( () => `${currentdate.value.tolocalestring("default", { month: "long", })} ${currentdate.value.getfullyear()}` ); const prevmonth = () => { currentdate.value = new date( currentdate.value.getfullyear(), currentdate.value.getmonth() - 1, 1 ); }; const nextmonth = () => { currentdate.value = new date( currentdate.value.getfullyear(), currentdate.value.getmonth() + 1, 1 ); }; const istoday = (day) => { const today = new date(); return day.date.todatestring() === today.todatestring(); }; const isselected = (day) => { return day.date.todatestring() === selecteddate.value.todatestring(); }; const isnotcurrentmonth = (day) => { return day.islastmonth || day.isnextmonth; }; const select = (day) => { selecteddate.value = day.date; emit("update:selecteddate", day.date); }; return { daysofweek, days, title, prevmonth, nextmonth, istoday, isselected, isnotcurrentmonth, select, }; }, };</script><style> .calendar { max-width: 500px; margin: 0 auto; font-family: arial, sans-serif; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .title { font-size: 18px; font-weight: bold; } .weekdays { display: flex; justify-content: space-around; margin-bottom: 10px; } .day { width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .days { display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 10px; } .today { background-color: lightblue; } .selected { background-color: blue; color: white; } .notcurrentmonth { color: #ccc; }</style>
使用该组件时，可以将selecteddate属性绑定到一个父组件中的数据，这个数据将会存储选中的日期。例如：
<template> <div> <!-- 用法一 --> <feicalendar :selecteddate="selecteddate" @update:selecteddate="onselecteddateupdated" /> <!-- 用法二 --> <!-- <feicalendar v-model:selecteddate="selecteddate" /> --> <p>selected date: {{ selecteddate }}</p> </div></template><script> import feicalendar from "./feicalendar.vue"; export default { components: { feicalendar, }, data() { return { selecteddate: new date(), }; }, watch: { selecteddate(nv) { console.log("nv", nv); }, }, methods: { onselecteddateupdated(selecteddate) { this.selecteddate = selecteddate; }, }, };</script>
这是一个简单的示例，可以根据自己的需求对代码进行修改和扩展。
以上就是如何用vue3实现一个日历组件的详细内容。