Vue.js自定义日历，禁用天数

<template>
  <div class="calendar">
    <!-- 日历的头部 -->
    <div class="header">
      <button @click="previousMonth">上个月</button>
      <span>{{ currentMonth }}</span>
      <button @click="nextMonth">下个月</button>
    </div>

    <!-- 日历的主体 -->
    <div class="body">
      <div v-for="day in days" :key="day" :class="{ disabled: isDisabled(day) }">
        {{ day }}
      </div>
    </div>
  </div>
</template>

data() {
  return {
    currentMonth: new Date().toLocaleString('default', { month: 'long' }),
    disabledDates: ['2022-01-05', '2022-01-10', '2022-01-15']
  };
},

computed: {
  days() {
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth() + 1;
    const daysInMonth = new Date(year, month, 0).getDate();
    const daysArray = [];

    for (let i = 1; i <= daysInMonth; i++) {
      const date = `${year}-${month.toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`;
      daysArray.push(date);
    }

    return daysArray;
  }
},

methods: {
  isDisabled(day) {
    return this.disabledDates.includes(day);
  },
  previousMonth() {
    // 切换到上个月的逻辑
  },
  nextMonth() {
    // 切换到下个月的逻辑
  }
}

<template>
  <div>
    <h1>自定义日历</h1>
    <Calendar />
  </div>
</template>

<script>
import Calendar from './Calendar.vue';

export default {
  components: {
    Calendar
  }
}
</script>