TUI

<template>
  <div class="component-card-demo-wrap" style="width: 200px">
    <TsTimePicker v-model="baseTime" placeholder="请选择时间" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

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

<template>
  <div class="component-card-demo-wrap" style="width: 200px">
    <TsTimePicker v-model="clearTime" placeholder="请选择时间" clearable />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

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

<template>
  <div class="component-card-demo-wrap-center">
    <TsTimePicker v-model="sizeValue" size="small" style="width: 200px" />
    <TsTimePicker v-model="sizeValue" size="medium" style="width: 200px" />
    <TsTimePicker v-model="sizeValue" size="large" style="width: 200px" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

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

<template>
  <div class="component-card-demo-wrap" style="width: 200px">
    <TsTimePicker v-model="disabledTime" disabled />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const disabledTime = ref('19:34:00');
</script>