使用了vue3有很长一段时间了，写了很多的基础组件在自己使用，整理一下（尽量使用最简单的方式实现），当做对自己知识的梳理。
vue3 + tailwindcss + ts
html结构
<template>
<div>
<-- 这里放input框 -->
<div></div>
<-- 点击input弹出日历 -->
<div>
<-- 头部 -->
<div></div>
<-- 星期 -->
<div></div>
<-- 日历主体 -->
<div></div>
<-- 按钮组 -->
<div></div>
</div>
</div>
</template>
input框，
代码如下:
<div class="block w-full h-[32px] relative border rounded-md">
<input
class="placeholder:text-[#B2B2B2] block w-full h-full rounded-md py-2 pl-2 pr-9 text-sm focus:outline-none focus:ring-0"
disabled
placeholder="选择时间"
type="text"
maxlength="32"
/>
<div
class="absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer"
>
<svg class="w-4 h-4 fill-[#C2C2C2]">
<use xlink:href="#icon-riqi" rel="external nofollow" />
</svg>
</div>
</div>
头部，
代码如下
<div class="flex justify-center">
<svg class="w-4 h-4 fill-[#C2C2C2] rotate-90 cursor-pointer">
<use xlink:href="#icon-down" rel="external nofollow" rel="external nofollow" />
</svg>
<span class="text-xs mx-5">二月2023</span>
<svg class="w-4 h-4 fill-[#C2C2C2] rotate-[270deg] cursor-pointer">
<use xlink:href="#icon-down" rel="external nofollow" rel="external nofollow" />
</svg>
</div>
星期，
代码如下：
<div class="grid grid-cols-7 auto-cols-[20px] auto-rows-[20px] text-xs mt-2 mx-[9px] justify-items-center gap-x-2.5" > <span>一</span> <span>二</span> <span>三</span> <span>四</span> <span>五</span> <span>六</span> <span>日</span> </div>
日历主体，
代码如下：
<div
class="grid grid-cols-7 auto-cols-[20px] auto-rows-[20px] text-xs mt-2 mx-[9px] gap-y-2 gap-x-2.5"
>
<span
:class="[
'cursor-pointer w-full h-full flex justify-center items-center',
v.color,
{
'!bg-[#60C2CC] rounded-full !text-white':
actives.one === v.time || actives.two === v.time,
},
setBgColor(v.time),
]"
v-for="(v, i) in days"
:key="i"
>{{ v.day }}</span
>
</div>
这里主要是用了，v-bind动态属性，来显示不同状态下的日历格子的样式（比如选中某天）
按钮组，
代码如下：
<div class="flex justify-between items-center mt-2.5 mx-[9px]">
<span class="text-xs text-[#9C9C9C]">跳到今天</span>
<div
class="w-[50px] h-5 bg-[#60C2CC] rounded-lg text-white leading-5 text-center text-xs"
>
确定
</div>
</div>
整体样式如下：
显示切换逻辑，主要是点击input，弹出日历
// 控制显示的变量
const isShow = ref(false)
// 点击按钮的时候显示
const openTimeSelect = () => {
isShow.value = true
}
// 点击确定，或者点击日历主体外的任何窗体的时候关闭，关闭的时候清空选中
const closeTimeSelect = () => {
isShow.value = false
actives.one = ''
actives.two = ''
}
定义变量，主要是定义日历用到的数据，和接口
// 本组件唯一定义的类型
interface DaysType {
day: number
color: string
time: string
}
const date = new Date() // 时间
const year = ref(0) // 年
const month = ref(0) // 月
const days = ref<DaysType[]>([]) // 需要循环渲染的日历主体数据
// 选中某天的数据，可以选中两天
const actives = reactive({
one: '',
two: '',
})
// 计算属性，把当前点击选中的日期转换成时间戳
const oneTimeNum = computed(() => new Date(actives.one).getTime())
const twoTimeNum = computed(() => new Date(actives.two).getTime())
为什么说，使用ts写的代码，但是只定义了一个接口，在vue3 + ts的开发中，我推荐的是使用类型推导的方式去写代码，有时候，你会发现，你写的ts类型多此一举。当然，你是ts艺术体操选手，那另说······
获取日历主体渲染的数据，逻辑如下: 具体代码如下：
const updateTime = () => {
days.value = []
year.value = date.getFullYear() // 获取当前年
month.value = date.getMonth() + 1 // 获取当前月份
const curDays = new Date(year.value, month.value, 0).getDate() // 当前月的天数
let curWeek = new Date(year.value, month.value - 1, 1).getDay() // 这个月第一天星期几
curWeek <= 0 ? (curWeek = 7) : curWeek // 如果值是0的话，那么本月第一天是周日
const preDays = new Date(year.value, month.value - 1, 0).getDate() // 上个月的天数
const preLastDay = curWeek - 1 // 获取上一个月有多少天
// 插入上一个月的日期
for (let i = 0; i < preLastDay; i++) {
days.value.unshift({
day: preDays - i,
color: 'text-[#CECECE]',
time: `${year.value}-${month.value - 1}-${preDays - i}`,
})
}
// 插入本月的日期
for (let i = 1; i <= curDays; i++) {
days.value.push({
day: i,
color: 'text-[#191919]',
time: `${year.value}-${month.value}-${i}`,
})
}
const lastPreDays = 42 - curDays - preLastDay
// 插入下个月的日期
for (let i = 1; i <= lastPreDays; i++) {
days.value.push({
day: i,
color: 'text-[#CECECE]',
time: `${year.value}-${month.value + 1}-${i}`,
})
}
}
上一月和下一月
// 上一月
const prevMonth = () => {
date.setMonth(date.getMonth() - 1)
updateTime()
}
// 下一月
const nextMonth = () => {
date.setMonth(date.getMonth() + 1)
updateTime()
}
选择两个日期选中，逻辑如下：
const selectTime = (item: DaysType) => {
const timeNum = new Date(item.time).getTime()
if (!actives.one || timeNum < oneTimeNum.value) {
actives.one = item.time
}
if (!actives.two || timeNum > oneTimeNum.value) {
actives.two = item.time
}
}
给两个点之间添加背景色，逻辑如下：
const setBgColor = (time: string) => {
const timeNum = new Date(time).getTime()
if (
oneTimeNum.value &&
twoTimeNum.value &&
oneTimeNum.value <= timeNum &&
timeNum <= twoTimeNum.value
) {
return 'bg-[#DFF3F5]'
}
}
其实还有更多可深入研究的点，比如：内置对象 date 为啥能够通过准确获取到当前月的天数等，实现原理是啥，还有其它日期组件扩展，比如props传参，比如多类型（周日历等）选择等等。 但是最终考虑到这是vue3组件相关知识的梳理（传参没必要讲，官方已经写的很好了），以及其它周日历等类型在代码层面上来说，只需稍稍调整，思路还是这个思路，感觉没啥必要去啰嗦，所以点到为止吧。
