vant组件封装年月日时分秒

项目要求使用时间的组件，要精确到时分秒，可是vant 不能精确到时分秒，资料找了好多，总算是最后照葫芦画瓢，做出来一个满足要求的组件。

项目背景j： uniapp+vue3+vant

这是封装好的组件： 使用方法

<template>
    <!-- 弹出层 -->

    <van-popup
        v-model:show="data.isPicker"
        position="bottom"
        round
        @close="confirmOn"
    >
        <van-picker
            ref="picker"
            title="请选择时间"
            :columns="data.columns"
            @change="onChange"
            @cancel="cancelOn"
            @confirm="onConfirm"
            v-model="data.selectedValues"
        />
    </van-popup>
</template>
<script setup>
import { reactive, watch, getCurrentInstance } from 'vue';
import { split } from 'lodash';
import {
    Form as VanForm,
    Field as VanField,
    Button as VanButton,
    Popup as VanPopup,
    Picker as VanPicker,
    Stepper as VanStepper,
    DatePicker as VanDatePicker
} from 'vant';

let { proxy } = getCurrentInstance();
const columns = [
    // 第一列
    [
        { text: '2021', value: 'Monday' },
        { text: '2021', value: 'Tuesday' },
        { text: '2021', value: 'Wednesday' },
        { text: '2021', value: 'Thursday' },
        { text: '2021', value: 'Friday' }
    ],
    // 第二列
    [
        { text: '1', value: 'Morning' },
        { text: '2', value: 'Afternoon' },
        { text: '2', value: 'Evening' }
    ]
];
const customFieldName = {
    text: 'value',
    value: 'values',
    children: ''
};
const data = reactive({
    isPicker: false, //是否显示弹出层
    columns: [], //所有时间
    Mdays: '', //弹窗关闭时月份所在值
    Dindex: null,
    selectedValues: []
});

const props = defineProps({
    showPicker: {
        type: Boolean
    },
    values: {
        type: String
    }
});
const emit = defineEmits(['changeValue', 'confirm']); //定义要向父组件传递的事件

watch(
    () => data.isPicker,
    val => {
        !val && emit('changeValue');
        data.columns = [];
        getcolumns();
    }
);
watch(
    () => props.showPicker,
    val => {
        console.log(val);
        data.isPicker = val;
    }
);
watch(
    () => props.values,
    val => {
        if (val == '') {
            data.Mdays = '';
            data.Dindex = null;
        }
    }
);
function getcolumns() {
    let strtime = props.values;
    let date = new Date(strtime.replace(/-/g, '/'));
    let vmoduletime = date.getTime();

    let vmoduledate;
    if (props.values != '') {
        vmoduledate = new Date(vmoduletime);
    } else {
        vmoduledate = new Date(); //没有传入时间则默认当前时刻
    }

    let Y = vmoduledate.getFullYear();
    let M = vmoduledate.getMonth();
    let D = vmoduledate.getDate();
    let h = vmoduledate.getHours();
    let m = vmoduledate.getMinutes();
    let s = vmoduledate.getSeconds();
    let year = []; //获取前后十年数组
    // year.values = [];
    let Currentday = new Date().getFullYear();
    for (let i = Currentday - 10; i < Currentday + 10; i++) {
        year.push({ text: i.toString(), value: i });
    }
    // year.defaultIndex = year.values.indexOf(Y); //设置默认选项当前年
    console.log(Y, M, D, h, m, s);
    data.selectedValues.push(Y);

    const _M = M < 10 ? `0${M + 1}` : M.toString();
    const _D = D < 10 ? `0${D + 1}` : D.toString();
    const _h = h < 10 ? `0${h + 1}` : h.toString();
    const _m = m < 10 ? `0${m + 1}` : m.toString();
    const _s = s < 10 ? `0${s}` : s.toString();

    data.selectedValues.push(_M);
    data.selectedValues.push(_D);
    data.selectedValues.push(_h);
    data.selectedValues.push(_m);
    data.selectedValues.push(_s);
    console.log(data.selectedValues);

    data.columns.push(year);

    let month = []; //获取12月数组
    // month.defaultIndex = M;
    month = Object.keys(Array.apply(null, { length: 13 })).map(function (item) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    month.splice(0, 1);
    data.columns.push(month);
    //获取当月的天数
    let days = getCountDays(Y, data.Mdays == '' ? M + 1 : data.Mdays);
    let day = []; //创建当月天数数组
    // day.defaultIndex = data.Dindex == null ? D - 1 : data.Dindex;
    day = Object.keys(Array.apply(null, { length: days + 1 })).map(function (
        item
    ) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    day.splice(0, 1);
    data.columns.push(day);
    let hour = []; //创建小时数组
    // hour.defaultIndex = h;
    hour = Object.keys(Array.apply(null, { length: 24 })).map(function (item) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    data.columns.push(hour);
    let mi = []; //创建分钟数组
    // mi.defaultIndex = m;
    mi = Object.keys(Array.apply(null, { length: 60 })).map(function (item) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    data.columns.push(mi);
    let ss = []; //创建秒数数组
    // ss.defaultIndex = s;
    ss = Object.keys(Array.apply(null, { length: 60 })).map(function (item) {
        if (+item + 1 <= 10) {
            return { text: '0' + item, value: '0' + item };
        } else if (+item + 1 == 11) {
            return { text: +item, value: +item };
        } else {
            return {
                text: (+item + 0).toString(),
                value: (+item + 0).toString()
            };
        }
    });
    data.columns.push(ss);
}
function onChange({ selectedOptions }) {
    // const dateTime = selectedOptions.map(o => o.text);
    // onConfirm(dateTime);
}
function getCountDays(year, month) {
    //获取某年某月多少天
    let day = new Date(year, month, 0);
    return day.getDate();
}

// 关闭弹框
function confirmOn() {
    emit('changeValue');
}
//时间选择器关闭
function cancelOn({ selectedValues }) {
    let endval =
        selectedValues[0] +
        '-' +
        selectedValues[1] +
        '-' +
        selectedValues[2] +
        ' ' +
        selectedValues[3] +
        ':' +
        selectedValues[4] +
        ':' +
        selectedValues[5];

    emit('changeValue', endval);
    emit('confirm', endval);
}
// 时间选择器确定
function onConfirm({ selectedValues }) {
    let endval =
        selectedValues[0] +
        '-' +
        selectedValues[1] +
        '-' +
        selectedValues[2] +
        ' ' +
        selectedValues[3] +
        ':' +
        selectedValues[4] +
        ':' +
        selectedValues[5];

    emit('changeValue', endval);
    emit('confirm', endval);
}
</script>

使用组件：

    <date-time-picker
        :values="timeVal"
        @changeValue="showEndDate = false"
        :showPicker="showEndDate"
        @confirm="onConfirmEnd"
    />

这是最后的效果图