更新记录
1.0.8(2025-07-09) 下载此版本
增加 head 插槽
1.0.7(2025-07-02) 下载此版本
优化
1.0.6(2025-07-01) 下载此版本
1
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | √ | √ | - | - |
x-delivery-time 配送时间选择组件使用说明
组件介绍
x-delivery-time
是一个用于选择配送时间的弹窗组件,支持日期和时间段的选择,适用于外卖、快递等需要预约配送时间的场景。
特性
- 支持自定义可选日期范围(默认近7天)
- 支持设置每日可选时间范围
- 提供"尽快送达"选项
- 支持自定义样式和主题色
安装使用
基础用法,注意: vue2和vue3 控制显示绑定方式不同
<!-- vue2 -->
<x-delivery-time :model-value.sync="chooseTimeShow" @change="onChange">
<template slot="icon">
<check-one theme="filled" size="40" fill="skyblue"/>
</template>
</x-delivery-time>
<!-- vue3 -->
<x-delivery-time v-model="chooseTimeShow" @change="onChange">
<template v-slot:icon>
<check-one theme="filled" size="40" fill="skyblue"/>
</template>
</x-delivery-time>
<template>
<view>
<!-- 触发按钮 -->
<button @click="showDeliveryTime = true">选择配送时间</button>
<!-- 配送时间选择组件 -->
<x-delivery-time
v-model="showDeliveryTime"
@change="onDeliveryTimeChange"
>
<!-- 自定义选中图标 -->
<template #icon>
<text class="icon">✓</text>
</template>
</x-delivery-time>
</view>
</template>
<script>
export default {
data() {
return {
showDeliveryTime: false,
selectedDeliveryTime: null
}
},
methods: {
onDeliveryTimeChange(data) {
this.selectedDeliveryTime = data
console.log('选择的配送时间:', data)
}
}
}
</script>
Props 属性
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
modelValue | Boolean | false | 弹窗显示状态,支持 v-model 双向绑定 |
dateNum | Number | 7 | 可选日期天数,默认近7天 |
limitBeginTime | String/Number | '0920' | 每日可选开始时间,格式:HHMM |
limitEndTime | String/Number | '2130' | 每日可选结束时间,格式:HHMM |
title | String | '选择送达时间' | 弹窗标题 |
fastestText | String | '尽快送达' | 最快送达选项文本 |
fastestShow | Boolean | true | 是否显示"尽快送达"选项 |
activeColor | String | 'skyblue' | 选中状态的颜色 |
customStyle | Object | {} | 自定义弹窗样式 |
safeArea | Boolean | true | 是否启用安全区域 |
Events 事件
事件名 | 参数 | 说明 |
---|---|---|
change | data | 选择时间变化时触发 |
update:modelValue | show | 弹窗显示状态变化时触发 |
change 事件返回数据格式
{
date: "2024/07/01", // 选择的日期
dateBegin: "2024/07/01 10:00", // 开始时间(具体时间段)
dateEnd: "2024/07/01 10:30", // 结束时间(具体时间段)
time: "10:00-10:30", // 时间段文本
dateTime: "2024/07/01 10:00-10:30" // 完整时间描述
}
// 当选择"尽快送达"时:
{
date: "2024/07/01",
dateBegin: "2024/07/01",
dateEnd: "2024/07/01",
time: undefined,
dateTime: "2024/07/01"
}
Slots 插槽
插槽名 | 说明 |
---|---|
head | 组件顶部内容自定义 |
icon | 选中状态的图标,可自定义选中标识 |
高级用法
1. 自定义时间范围
<x-delivery-time
v-model="showDeliveryTime"
:date-num="3"
limit-begin-time="1000"
limit-end-time="2200"
@change="onDeliveryTimeChange"
/>
2. 自定义样式
<x-delivery-time
v-model="showDeliveryTime"
active-color="#FF6B6B"
:custom-style="{
height: '600rpx',
backgroundColor: '#f5f5f5'
}"
@change="onDeliveryTimeChange"
/>
3. 隐藏"尽快送达"选项
<x-delivery-time
v-model="showDeliveryTime"
:fastest-show="false"
@change="onDeliveryTimeChange"
/>
4. 自定义标题和文本
<x-delivery-time
v-model="showDeliveryTime"
title="预约送货时间"
fastest-text="立即配送"
@change="onDeliveryTimeChange"
/>
注意事项
-
时间格式:
limitBeginTime
和limitEndTime
使用 4 位数字格式(HHMM),如 "0920" 表示 09:20 -
依赖组件:组件依赖
uni-popup
组件 -
时间过滤:当选择今天时,组件会自动过滤已过期的时间段
-
平台差异:H5 平台会有 1 秒延迟处理,以解决 uni-popup 立即打开会自动关闭的问题
样式自定义
组件使用 SCSS 编写样式,支持以下自定义:
// 自定义弹窗样式
.popup {
.title {
// 标题样式
}
.left {
// 左侧日期列表样式
.date_item {
// 日期项样式
}
}
.right {
// 右侧时间列表样式
.time_item {
// 时间项样式
}
}
}
完整示例
<template>
<view class="container">
<view class="selected-time" v-if="selectedTime">
<text>已选择:{{ formatSelectedTime(selectedTime) }}</text>
</view>
<button @click="showPicker = true" class="select-btn">
选择配送时间
</button>
<x-delivery-time
v-model="showPicker"
:date-num="5"
limit-begin-time="0900"
limit-end-time="2100"
title="选择配送时间"
fastest-text="尽快送达"
active-color="#007AFF"
@change="handleTimeChange"
>
<template #icon>
<text class="check-icon">✓</text>
</template>
</x-delivery-time>
</view>
</template>
<script>
export default {
data() {
return {
showPicker: false,
selectedTime: null
}
},
methods: {
handleTimeChange(data) {
this.selectedTime = data
},
formatSelectedTime(data) {
if (!data.time) {
return `${data.date} 尽快送达`
}
return `${data.date} ${data.time}`
}
}
}
</script>