SelectTime

简易介绍

selectTime时间选择器组件，用于用户选择时间或时间范围。
可以使用<MYSelect-time></MYSelect-time>或者<MYSelect-time />来实现一个时间选择器

基础用法

使用v-model绑定时间值。

代码演示

000102030405060708091011121314151617181920212223:000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859

<template>
    <MYSelect-time v-model='timePoint' />
</template>

展开代码

选择时间范围

使用range属性可以启用时间范围选择模式。

代码演示

000102030405060708091011121314151617181920212223:000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859

至

000102030405060708091011121314151617181920212223:000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859

<template>
    <MYSelect-time v-model='timeRange' range />
</template>

展开代码

自定义小时选项

使用hourOptions属性可以自定义小时选项。

代码演示

091011121314151617:000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859

<template>
    <MYSelect-time v-model='timePoint2' :hourOptions='[9, 10, 11, 12, 13, 14, 15, 16, 17]' />
</template>

展开代码

自定义分钟选项

使用minuteOptions属性可以自定义分钟选项。

代码演示

000102030405060708091011121314151617181920212223:00153045

<template>
    <MYSelect-time v-model='timePoint3' :minuteOptions='[0, 15, 30, 45]' />
</template>

展开代码

组合使用

最后，实现个多种api组合使用实现个时间选择器：

代码演示

0809101112131415161718:0030

至

0809101112131415161718:0030

<template>
    <MYSelect-time 
        v-model='timeRange2' 
        range 
        :hourOptions='[8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]'
        :minuteOptions='[0, 30]'
    />
</template>

展开代码

API 参考

Props

参数	说明	类型	可选值	默认值
modelValue	绑定值	string | array	—	—
range	是否选择范围	boolean	—	false
hourOptions	小时选项	number[]	—	[0-23]
minuteOptions	分钟选项	number[]	—	[0-59]

类型定义

interface SelectTimeProps {
  modelValue?: string | string[];
  range?: boolean;
  hourOptions?: number[];
  minuteOptions?: number[];
}