vue3+ts封装Date-Picker时间插件

Date-Picker时间插件封装：

<template>
    <div class="date-picker">
        <div class="date-picker-box">
            <div class="date-picker-box-header">
                <div class="date-picker-box-header-prev" @click="preMon">{
   {
    '<<' }}</div>
                <div class="date-picker-box-header-year">{
   {
    year }}年{
   {
    month }}月</div>
                <div class="date-picker-box-header-next" @click="nextMon">{
   {
    '>>' }}</div>
            </div>
            <div class="date-picker-box-content">
                <div class="date-picker-box-content-week">
                    <div class="date-picker-box-content-weekday">日</div>
                    <div class="date-picker-box-content-weekday">一</div>
                    <div class="date-picker-box-content-weekday">二</div>
                    <div class="date-picker-box-content-weekday">三</div>
                    <div class="date-picker-box-content-weekday">四</div>
                    <div class="date-picker-box-content-weekday">五</div>
                    <div class="date-picker-box-content-weekday">六</div>
                </div>
                <div class="date-picker-box-content-cont">
                    <div class="date-picker-box-content-cont-day" v-for="(item, index) in pickerDate" :key="index" :class="{ outfocus: item.outfocus, today: item.showday, start: showStartEnvfun(item.dateNum, item.outfocus), end: showEndEnvfun(item.dateNum, item.outfocus), black: showBlack(item.dateNum, item.outfocus), half: showHalffun(item.dateNum, item.outfocus) }" @click="checkDay(item.dateNum, item.outfocus)">
                        {
   {
    item.dateNum }}
                    </div>
                </div>
            </div>
            <div class="date-picker-box-footer">
                <div class="date-picker-box-footer-today">今天</div>
                <div class="date-picker-box-footer-start">开始</div>
                <div class="date-picker-box-footer-end">结束</div>
            </div>
            <div class="confim">确定</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {
    ref, reactive } from 'vue';
type Pinks = {
   
    dateNum: number;
    outfocus: boolean;
    showday?: boolean;
};
let year = ref<number>(0); // 展示的年
let month = ref<number>(0); // 展示的月
let startEnv = ref<string>(''); // 开始日期
let endEnv = ref<string>(''); // 结束日期
let today = ref<number>(0); // 当天
let pickerDate = reactive<Pinks[]>([]); // 选择日期

// 两个日期之间间隔多少天
const getDatePeriod = (sDate1: string, sDate2: string) => {
   
    // 获得两个时间的时间戳
    let oDate1 = new Date(sDate1)