Vue3+Vant4实现移动端时间范围选择器

1. 移动端时间范围选择器的必要性

在移动端应用开发中，时间范围选择是一个极其常见的功能需求。无论是电商平台的订单筛选、金融应用的交易记录查询，还是内容管理系统的数据统计，都需要用户能够方便地选择时间区间。与PC端相比，移动端的时间选择器面临着更多挑战：

• 屏幕空间有限，需要更紧凑的布局
• 触摸操作需要更大的点击区域
• 需要更直观的视觉反馈
• 需要处理不同设备的兼容性问题

基于Vue3和Vant4实现的时间范围选择器，能够很好地解决这些问题。Vant4作为移动端组件库，提供了符合移动端交互习惯的日期选择组件，而Vue3的Composition API则让我们的逻辑组织更加清晰。

2. 项目结构与组件设计

2.1 组件分层架构

我们的时间范围选择器采用了两层组件结构：

1. RangTime组件：作为入口组件，负责显示当前选择的时间范围和触发选择器弹窗
2. RangTimePickerModal组件：实际的时间选择弹窗，包含起始时间和结束时间的选择逻辑

这种分层设计的好处是：

• 职责分离，每个组件只关注自己的功能
• 便于复用，弹窗组件可以在其他地方单独使用
• 状态管理更清晰，父子组件通过props和emit通信

2.2 核心状态管理

在Vue3的setup语法糖中，我们使用ref和computed来管理组件状态：

javascript复制// 显示/隐藏弹窗的状态
const showModal = ref(false)

// 显示值的计算属性
const displayValue = computed(() => {
  if (props.modelValue && props.modelValue.length) {
    return dayjs(props.modelValue[0]).format('YYYY/MM/DD') + ' - ' + 
           dayjs(props.modelValue[1]).format('YYYY/MM/DD')
  }
  return ''
})

这种响应式状态管理方式让我们的组件能够自动更新UI，无需手动操作DOM。

3. 时间选择弹窗的实现细节

3.1 弹窗基础结构

我们使用Vant4的van-popup组件作为弹窗容器，并自定义了头部和内容区域：

html复制<van-popup
  v-model:show="showDatePick"
  position="bottom"
  :overlay-style="{ zIndex: 1000 }"
>
  <div class="custom-picker-wrapper">
    <!-- 顶部操作栏 -->
    <div class="custom-submit">
      <div @click="onCancelDate">取消</div>
      <div @click="onConfirmDate">确定</div>
    </div>
    
    <!-- 时间选择头部 -->
    <div class="custom-header">
      <!-- 起始时间和结束时间Tab -->
    </div>
    
    <!-- 日期选择器区域 -->
    <div class="custom-picker">
      <van-date-picker v-model="startTime" />
      <van-date-picker v-model="endTime" />
    </div>
  </di