VUE 3 TypeScript 自定义 Calendar 日历：点击选择与滑动选择日期，跨月选择

随着前端技术的不断发展，Vue 3 已经成为许多开发者首选的框架。在某些项目中，我们可能需要一个灵活的日期选择器，以满足特定的需求。下面将介绍如何使用 Vue 3 和 TypeScript 创建一个自定义的 Calendar 日历组件，实现点击选择和滑动选择日期、跨月选择等功能。
一、准备工作
首先，确保你的项目已经安装了 Vue 3 和 TypeScript。你可以通过以下命令安装所需的依赖：

npm install vue@next typescript

二、创建自定义日历组件

1. 在你的 Vue 项目中，创建一个新的 TypeScript 文件，例如 MyCalendar.ts。
2. 在该文件中，导入所需的依赖和工具：

   import { ref, reactive } from 'vue';
   import dayjs from 'dayjs';
   import { onMounted, onUnmounted } from 'vue';

3. 创建一个响应式的数据对象，用于存储日历的相关状态：

   interface CalendarState {
   currentDate: dayjs.Dayjs;
   minDate: dayjs.Dayjs;
   maxDate: dayjs.Dayjs;
   selectedDate: dayjs.Dayjs;
   }
   const state = reactive<CalendarState>({
   currentDate: dayjs(),
   minDate: dayjs().subtract(1, 'year'),
   maxDate: dayjs().add(1, 'year'),
   selectedDate: null,
   });

4. 创建一个方法来更新当前日期：

   const updateCurrentDate = () => {
   state.currentDate = dayjs();
   };

5. 创建日历视图，使用 dayjs 的相关方法来处理日期和时间的显示：

   const renderCalendar = () => {
   const { currentDate, minDate, maxDate, selectedDate } = state;
   return (
   <div>
   <div>当前日期：{currentDate.format('YYYY-MM-DD')}</div>
   <div>最小日期：{minDate.format('YYYY-MM-DD')}</div>
   <div>最大日期：{maxDate.format('YYYY-MM-DD')}</div>
   <div>已选日期：{selectedDate ? selectedDate.format('YYYY-MM-DD') : '无'}</div>
   </div>
   );
   };