Tui

TimePicker 时间选择器

用于选择或输入时间的组件，支持时、分、秒的选择。

基础用法

基本的时间选择器，支持 v-model 双向绑定。

示例代码

vue

<template>
  <TsTimePicker v-model="baseTime" placeholder="请选择时间" />
</template>

<script setup>
import { ref } from 'vue';
import { TsTimePicker } from '@packages';

const baseTime = ref('');
</script>

clearable用法

通过配置 clearable 属性即可得到一个可一键清空的时间选择器

示例代码

vue

<template>
  <TsTimePicker v-model="baseTime" placeholder="请选择时间" />
</template>

<script setup>
import { ref } from 'vue';
import { TsTimePicker } from '@packages';

const baseTime = ref('');
</script>

不同尺寸

提供多种尺寸的时间选择器，通过 size 属性设置。

示例代码

vue

<template>
  <div>
    <TsTimePicker v-model="timeValue" size="small" />
    <TsTimePicker v-model="timeValue" size="medium" />
    <TsTimePicker v-model="timeValue" size="large" />
    <TsTimePicker v-model="timeValue" size="x-large" />
  </div>
</template>

禁用状态

通过 disabled 属性禁用时间选择器。

示例代码

vue

<template>
  <TsTimePicker v-model="timeValue" disabled />
</template>

<script setup>
import { ref } from 'vue';
import { TsTimePicker } from '@packages';

const timeValue = ref('12:00:00');
</script>

属性 (Props)

modelValue / v-model

绑定值

string

—

value

绑定值（兼容旧版）

string

—

placeholder

输入框占位文本

string

—

"请选择时间"

size

输入框尺寸

string

small / medium / large

"medium"

disabled

是否禁用

boolean

true / false

false

format

显示在输入框中的格式

string

—

"HH:mm:ss"

clearable

是否可清空

boolean

true / false

false

事件 (Events)

change

用户确认选定的值时触发

(value: string)

update:modelValue

当绑定值变化时触发

(value: string)

blur

当输入框失去焦点时触发

—

focus

当输入框获得焦点时触发

—