更新记录

0.0.1（2022-12-02） 下载此版本

vue2版本升级为veu3

平台兼容性

时间选择器

APP、H5、微信小程序都可以使用，其他可自行测试

使用方法

在 template 中使用

<template>

    <!-- 预约时间段的写法 -->
    <times @change="getTime" :isMultiple="true" :timeInterval="1" :isQuantum="true" :disableTimeSlot="disableTimeSlot">
    </times>
    <!-- 多选时间的配置 -->
    <!-- <times @change="getTime" :timeInterval="1" :appointTime="appointTime"
        :isMultiple="true" :disableTimeSlot = "disableTimeSlot"></times> -->

    <!-- 单选的配置 -->
    <!--    <times @change="getTime" :timeInterval="1" :appointTime="appointTime"
        :isMultiple="false" :disableTimeSlot = "disableTimeSlot"></times> -->

    <!-- 预约时间段 -->
    <!-- <times @change="getTime" :timeInterval="1" :appointTime="appointTime"
        :isSection="true" :disableTimeSlot = "disableTimeSlot"></times> -->

</template>

在 script 中使用

<script setup lang="ts">
    import times from '@/components/pretty-times/pretty-times.vue'

    const appointTime = ["2022-02-10 15:30:00"]
    const disableTimeSlot = [
        ["2022-10-17 09:00:00", "2022-10-17 10:00:00"],
        ["2022-05-05 16:30:00", "2022-05-05 18:30:00"]
    ]

    const getTime = (time:any) => {
        console.log(time, '时间')
    }
</script>

属性说明

说明

推荐新手可以拿去练手的一个开源小程序 穿搭Style小程序