用vue监听事件写一个日历

// 监听事件写一个日历组件
<template>
  <div>
    <input type="text" v-model="selectedDate" @click="showCalendar">
    <div v-if="show">
      <div>
        <select v-model="selectedYear" @change="updateCalendar">
          <option v-for="year in years" :key="year">{{ year }}</option>
        </select>
        <select v-model="selectedMonth" @change="updateCalendar">
          <option v-for="(month, index) in months" :key="index">{{ month }}</option>
        </select>
      </div>
      <table>
        <tr>
          <th v-for="day in days" :key="day">{{ day }}</th>
        </tr>
        <tr v-for="week in calendar" :key="week">
          <td v-for="date in week" :key="date" @click="selectDate(date)">{{ date }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      selectedDate: '',
      selectedYear: new Date().getFullYear(),
      selectedMonth: new Date().getMonth() + 1,
      days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      years: [2021, 2022, 2023], // 可根据需求动态生成
      calendar: [] // 根据年月动态生成日历
    };
  },
  methods: {
    showCalendar() {
      this.show = true;
      this.updateCalendar();
    },
    updateCalendar() {
      // 根据selectedYear和selectedMonth更新calendar
    },
    selectDate(date) {
      this.selectedDate = `${this.selectedYear}-${this.selectedMonth}-${date}`;
      this.show = false;
    }
  }
};
</script>