更新记录

1.0.13（2025-07-19） 下载此版本

增加关闭图片和选择勾勾图片的替换

1.0.12（2025-07-17） 下载此版本

实例说明文挡

1.0.11（2025-07-17） 下载此版本

补全说明文挡

平台兼容性

uni-app(4.06)

hbxw-timepicker预约时间选择组件

介绍

一个预约时间选择器组件，常用于如快递，按摩等上门服务时间预约选择

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view>
    <button @click="pickerTime(0)">预约时间0</button>
    <button @click="pickerTime(1)">预约时间1</button>
    <button @click="pickerTime(2)">预约时间2</button>
    <button @click="pickerTime(2)">预约时间3</button>
        <hbxw-timepicker v-model:isShow="showTimePicker0" :isBtn="false" @change="pickerChange"></hbxw-timepicker>
    <hbxw-timepicker v-model:isShow="showTimePicker1" :maxHour="16" :isBtn="false" @change="pickerChange"></hbxw-timepicker>
        <hbxw-timepicker v-model:isShow="showTimePicker2" :dayRange="7" :minHour="8" :maxHour="20" @change="pickerChange"></hbxw-timepicker>
        <hbxw-timepicker v-model:isShow="showTimePicker3" @change="pickerChange">
      <template #title="{title}">
        <view>{{title}}</view>
      </template>
      <template #btn="{result}">
        <button style="font-size: 24rpx;">{{result}}</button>
      </template>
    </hbxw-timepicker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showTimePicker0: false,
                showTimePicker1: false,
                showTimePicker2: false,
                showTimePicker3: false
            }
        },
        methods: {
            pickerTime(index) {
        this['showTimePicker'+index] = true;
      },
      pickerChange(result) {
        console.log('---- pickerChange ----:',  result);
      }
        }
    }
</script>

<style>

</style>

API

Props

Slots

Events

注意事项

• v-model 在 vue2 和 vue3 中写法不一样，vue2 中为 v-model="isShow"，vue3 中为 v-model:isShow="isShow"
• 组件显示包体积较大，是因为有示例动图，其实真正打包到项目中的包体是比较小的，请放心使用