更新记录

1.0.0（2026-07-07） 下载此版本

• 上线时间滑动选择器

平台兼容性

uni-app(4.65)

uni-app x(4.71)

m-time-slider 时间滑块组件

一个用于选择时间的滑块组件，支持触摸拖动，以小时和分钟为单位显示时间。

功能特性

• 支持 v-model 双向绑定
• 触摸拖动选择时间
• 自定义滑块样式、轨道颜色
• 显示当前选择的时间值
• 可配置最小值、最大值和步长
• 自动格式化时间为小时和分钟

基本用法

<template>
  <m-time-slider v-model="timeValue" />
</template>

<script setup>
import { ref } from 'vue'

const timeValue = ref(10) // 默认10分钟
</script>

完整示例

<template>
  <view>
    <m-time-slider
      v-model="duration"
      :min="0"
      :max="480"
      :step="5"
      rail-color="#E0E0E0"
      track-color="#4CAF50"
      thumb-color="#4CAF50"
      thumb-border="none"
      :thumb-size="40"
      @change="onTimeChange"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const duration = ref(120)

const onTimeChange = (value) => {
  console.log('选择的时间:', value)
}
</script>

Props 参数

Events 事件

时间格式化

组件会自动将分钟数格式化为易读的格式：

• 30 → 30分钟
• 60 → 1小时
• 90 → 1小时30分钟
• 120 → 2小时

样式定制

可以通过 props 自定义滑块的外观：

<m-time-slider
  v-model="time"
  rail-color="#E0E0E0"
  track-color="#4CAF50"
  thumb-color="#4CAF50"
  thumb-border="none"
  :thumb-size="40"
/>