Viog UI

时间选择器 time-select 待优化

用于选择时间

使用说明

简单引入

你需要通过v-model向该组件绑定一个对象，选择的时间将保存在该对象中，格式为:

{
  hour?: number,
  minute?: number
  second?: number
}
请选择
展开代码
<vi-time-select v-model="obj" class="my-select-v"></vi-time-select>

<script setup>
  import { reactive } from 'vue'
  const obj = reactive({})
</script>

样式

通过属性type控制选择器样式

00:00:00
00:00:00
展开代码
<vi-select-v v-model="obj" class="my-select-v"></vi-select-v>

大小

通过属性size控制选择器大小

00:00:00
00:00:00
00:00:00
00:00:00
00:00:00
00:00:00
展开代码
<vi-time-select size="big" v-model="obj" class="my-select-v"></vi-time-select>
<vi-time-select v-model="obj" class="my-select-v"></vi-time-select>
<vi-time-select size="small" v-model="obj" class="my-select-v"></vi-time-select>
<vi-divider/>
<vi-time-select size="big" type="button" v-model="obj" class="my-select-v"></vi-time-select>
<vi-time-select type="button" v-model="obj" class="my-select-v"></vi-time-select>
<vi-time-select size="small" type="button" v-model="obj" class="my-select-v"></vi-time-select>

禁用

通过属性disabled禁用选择器

00:00:00
00:00:00
展开代码
<vi-time-select disabled v-model="obj" class="my-select-v"></vi-time-select>
<vi-time-select disabled type="button" v-model="obj" class="my-select-v"></vi-time-select>

时间格式化

通过format传入需要展示的时间格式

hh代表小时、mm代表分钟、ss代表秒，默认格式为：hh:mm:ss

00时00分00秒
展开代码
<vi-time-select format="hh时mm分ss秒" v-model="obj" class="my-select-v"></vi-time-select>

最小选择时间单位

通过unit属性定义时间选择器最小单位：hour、minute、second（默认）

其余无法选择的时间单位，也可以显示在选择显示界面上

00 时
00:00:00
00:00:00
展开代码
<vi-time-select v-model="obj" class="my-select-v" unit="hour" format="hh 时"></vi-time-select>
<vi-time-select v-model="obj" class="my-select-v" unit="minute"></vi-time-select>
<vi-time-select v-model="obj" class="my-select-v"></vi-time-select>

范围选择

通过range属性开启范围选择，此时modelValue对象值情况如下：

{
  hour?: number,
  minute?: number,
  second?: number,
  endHour?: number,
  endMinute?: number,
  endSecond?: number
}
00:00:00-请选择
展开代码
<vi-time-select v-model="obj" class="my-select-v" range></vi-time-select>

通过separate属性更换分隔符

00:00:00至00:00:00
展开代码
<vi-time-select v-model="obj" class="my-select-v" range separate="至"></vi-time-select>

Props

select

属性名描述类型默认值

插槽

无插槽

事件支持

无特殊事件

可覆写css变量

变量名描述默认值