vue3 手写日期选择器

手写Vue3日期选择器可以通过以下步骤实现：

1. 创建一个名为DatePicker的Vue组件。
2. 在组件中定义一个data属性，包含所需的日期数据，例如当前日期、选择的开始日期和结束日期。
3. 在模板中创建日期选择器的界面，包括一个日历表格和选择按钮。
4. 在方法中实现选择日期的逻辑。可以通过按钮点击事件或者直接在日历表格中选择日期来触发选择逻辑。在选择日期后，更新开始日期和结束日期的值。
5. 在组件中定义一个computed属性，用于计算并返回选择的日期范围。
6. 在模板中使用v-model指令将选择的日期范围绑定到父组件的数据上。

以下是一个简单的Vue3日期选择器的示例代码：

<template>
  <div>
    <input type="text" v-model="selectedRange" readonly>
    <button @click="showCalendar">选择日期</button>

    <div v-if="showCalendar">
      <!-- 日历表格 -->
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue';

export default {
  setup() {
    // 数据初始化
    const selectedRange = ref('');
    const showCalendar = ref(false);
    const startDate = ref(null);
    const endDate = ref(null);

    // 显示日历
    const showCalendar = () => {
      showCalendar.value = true;
    };

    // 选择日期
    const selectDate = (date) => {
      if (!startDate.value) {
        startDate.value = date;
      } else if (!endDate.value) {
        if (date > startDate.value) {
          endDate.value = date;
        } else {
          endDate.value = startDate.value;
          startDate.value = date;
        }
      } else {
        startDate.value = date;
        endDate.value = null;
      }
    };

    // 计算选择的日期范围
    const selectedRange = computed(() => {
      if (startDate.value && endDate.value) {
        return `${startDate.value} - ${endDate.value}`;
      } else if (startDate.value) {
        return startDate.value;
      } else {
        return '';
      }
    });

    return {
      selectedRange,
      showCalendar,
      selectDate
    };
  }
};
</script>