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="time-picker-feature-demo">
    <div class="feature-row">
      <div class="feature-meta">
        <div class="feature-title">格式：HH:mm</div>
        <div class="feature-desc">仅展示“时:分”，适合常规排班场景。</div>
      </div>
      <div class="feature-control">
        <TsTimePicker v-model="hourMinuteValue" format="HH:mm" clearable />
      </div>
    </div>

    <div class="feature-row">
      <div class="feature-meta">
        <div class="feature-title">即时提交（needConfirm=false）</div>
        <div class="feature-desc">点击时间项后立即更新，不需要再点击确认。</div>
      </div>
      <div class="feature-control">
        <TsTimePicker v-model="instantValue" format="mm:ss" :needConfirm="false" />
      </div>
    </div>

    <div class="feature-row">
      <div class="feature-meta">
        <div class="feature-title">禁用状态</div>
        <div class="feature-desc">展示值但不可交互。</div>
      </div>
      <div class="feature-control">
        <TsTimePicker v-model="disabledValue" disabled />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const hourMinuteValue = ref('09:30');
const instantValue = ref('15:20');
const disabledValue = ref('18:30:45');
</script>

<style scoped>
.time-picker-feature-demo {
  width: 100%;
  border: 1px solid var(--bussiness-date-feature-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bussiness-date-feature-bg);
}

.feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px dashed var(--bussiness-date-feature-border);
}

.feature-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--bussiness-date-feature-title);
}

.feature-desc {
  margin-top: 4px;
  font-size: 12px;
  color: var(--bussiness-date-feature-desc);
}

.feature-control {
  width: 200px;
  min-width: 200px;
}

.feature-row:last-child {
  border-bottom: none;
}

.feature-row:hover {
  background: var(--bussiness-date-feature-row-hover);
}
</style>