更新记录

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"
/>

注意事项

  1. 时间格式limitBeginTimelimitEndTime 使用 4 位数字格式(HHMM),如 "0920" 表示 09:20

  2. 依赖组件:组件依赖 uni-popup 组件

  3. 时间过滤:当选择今天时,组件会自动过滤已过期的时间段

  4. 平台差异: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>

插件如果对你有帮助给个好评吧~

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问