更新记录

1.0.6（2024-12-30） 下载此版本

优化组件

1.0.5（2024-12-30） 下载此版本

修复组件BUG

1.0.4（2024-12-30） 下载此版本

优化组件 支持返回今天明天后天等别称 支持配置是否需要补全二位

平台兼容性

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

Events