更新记录

1.0.0（2025-11-11） 下载此版本

首次发布

平台兼容性

uni-app(4.0)

props

events

温馨提示

组件中使用了 Wot UI 的 wd-popup 组件，用于弹窗显示时间选择器,如果只需要视图组件，可以删除组件中的 wd-popup ,只需要把里面的这些代码移除即可

<wd-popup position="bottom" custom-style="border-radius:32rpx 32rpx 0 0;" v-model="show"> </wd-popup>
show: false,
open () {
  this.show = true
}
close () {
  this.show = false
}
this.close()

基本使用

<template>
   <TimeRangeSelect
        :default-time="formData.time"
        @confirm="changeTimeFunc"
        ref="timeRangeSelect"
    />
    <div class="w-100% flex justify-end items-center gap-20rpx">
      <div :class="[formData.time.length>0?'color-#000000D9':'color-#bfbfbf']" @click="openTimePopup">
        {{ formData.time.join(' ~ ') || '请选择时间' }}
      </div>
      <wd-icon name="arrow-right" color="#bfbfbf" size="16px" />
    </div>
</template>

<script setup>
// 引入你存放 TimeRangeSelect 组件的路径
import TimeRangeSelect from '@/businessComponents/TimeRangeSelect.vue'

const formData = ref({
  time: []
})

const timeRangeSelect = ref(null)

// 通过拿到ref后的open方法打开弹窗
const openTimePopup = () => {
  timeRangeSelect.value.open()
}

</script>

组件功能

• 选择开始和结束时间
• 当用户修改开始时间时，如果当前的结束时间早于新的开始时间，会自动将结束时间调整为与开始时间相同
• 在选择结束时间时，如果选择的时间早于开始时间，将不会更新选择
• 禁用的选项会显示为灰色，让用户清楚地知道哪些时间不可选
• 当开始时间改变导致结束时间无效时，系统会自动调整结束时间