FxTimeSelect 时间选择

固定时间点选择器，选项由 start、end、step 生成。可用时间范围为 00:00 到 23:59。

FxTimeSelect 属于 @fx/components。

固定时间点

提供一组固定时间供用户选择。通过 start、end、step 指定起始时间、结束时间与时间步长。

<template>
  <FxTimeSelect
    v-model="value"
    start="08:30"
    step="00:15"
    end="18:30"
    placeholder="选择时间"
    style="width: 240px"
  />
</template>

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

const value = ref("")
</script>

时间格式

用 format 控制时间（小时与分钟）的显示格式。

WARNING

注意大小写

<template>
  <FxTimeSelect
    v-model="value"
    start="00:00"
    step="00:30"
    end="23:59"
    format="hh:mm A"
    placeholder="选择时间"
    style="width: 240px"
  />
</template>

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

const value = ref("")
</script>

固定时间范围

若先选了开始（或结束）时间，则结束（或开始）时间的可选项会随之变化。

<template>
  <div class="demo-time-range">
    <FxTimeSelect
      v-model="startTime"
      :max-time="endTime"
      start="08:30"
      step="00:15"
      end="18:30"
      placeholder="开始时间"
      style="width: 240px"
    />
    <FxTimeSelect
      v-model="endTime"
      :min-time="startTime"
      start="08:30"
      step="00:15"
      end="18:30"
      placeholder="结束时间"
      style="width: 240px"
    />
  </div>
</template>

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

const startTime = ref("")
const endTime = ref("")
</script>

<style scoped>
.demo-time-range {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
</style>

扩展能力

以下为 FxTimeSelect 在固定时间点选择之外额外提供的能力。

禁用区间

min-time / max-time 让范围外的选项禁用（不缩小列表范围）。下例仅 08:00–12:00 可选。

<template>
  <FxTimeSelect
    v-model="value"
    start="00:00"
    step="00:30"
    end="23:59"
    min-time="08:00"
    max-time="12:00"
    placeholder="仅 08:00–12:00 可选"
    style="width: 240px"
  />
</template>

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

const value = ref("")
</script>

前缀图标

prefix-icon 传图标名（FxIcon 渲染）或组件；也可用 prefix 插槽完全自定义前缀内容。

<template>
  <div class="demo-row">
    <FxTimeSelect
      v-model="value1"
      prefix-icon="ep:alarm-clock"
      placeholder="自定义 prefix-icon"
      style="width: 240px"
    />
    <FxTimeSelect v-model="value2" placeholder="prefix 插槽" style="width: 240px">
      <template #prefix>
        <span class="slot-text">时</span>
      </template>
    </FxTimeSelect>
  </div>
</template>

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

const value1 = ref("")
const value2 = ref("")
</script>

<style scoped>
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.slot-text {
  color: var(--fx-color-primary);
}
</style>

不可编辑

editable 为 false 时关闭输入筛选，仅能从下拉选择。

<template>
  <FxTimeSelect
    v-model="value"
    :editable="false"
    start="08:00"
    step="00:30"
    end="20:00"
    placeholder="仅从下拉选择"
    style="width: 240px"
  />
</template>

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

const value = ref("")
</script>

清空回填

value-on-clear 控制清空时回填的值，不传时维持默认（undefined）。

<template>
  <div class="demo-block">
    <FxTimeSelect
      v-model="value"
      value-on-clear="08:00"
      start="08:00"
      step="00:30"
      end="20:00"
      placeholder="清空后回填 08:00"
      style="width: 240px"
    />
    <p class="value-text">当前值：{{ value ?? "(空)" }}</p>
  </div>
</template>

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

const value = ref<string | undefined>(undefined)
</script>

<style scoped>
.demo-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.value-text {
  font-size: 13px;
  color: var(--fx-text-color-secondary);
}
</style>

API

Attributes

属性	说明	类型	默认值
model-value / v-model	绑定值	string	—
disabled	是否禁用	boolean	false
editable	输入框是否可编辑	boolean	true
clearable	是否显示清空按钮	boolean	true
include-end-time	是否在选项中包含 end	boolean	false
size	输入框尺寸	'large' | 'default' | 'small'	default
placeholder	非范围模式的占位文本	string	—
name	原生 name 属性	string	—
effect	下拉主题，内置 dark / light	'dark' | 'light'	light
prefix-icon	自定义前缀图标。字符串为 IconString 类型（即 FxIcon 图标名，如 ep:edit、ant-design:home、svg:xxx），亦可传组件	string | Component	ep:clock
clear-icon	自定义清空图标。字符串为 IconString 类型（即 FxIcon 图标名，如 ep:edit、ant-design:home、svg:xxx），亦可传组件	string | Component	ep:circle-close
start	起始时间	string	09:00
end	结束时间	string	18:00
step	时间步长	string	00:30
min-time	最小时间，早于该时间的选项禁用	string	—
max-time	最大时间，晚于该时间的选项禁用	string	—
format	时间显示格式	string	HH:mm
empty-values	组件的空值列表	array	—
value-on-clear	清空时回填的值	string | number | boolean | Function	—
popper-class	下拉自定义类名	string	—
popper-style	下拉自定义样式	string | object	—

Events

事件名	说明	类型
change	用户确认选值时触发	(value: string) => void
blur	输入框失焦时触发	(event: FocusEvent) => void
focus	输入框聚焦时触发	(event: FocusEvent) => void
clear	点击清空按钮时触发	() => void

Exposes

方法	说明	类型
focus	聚焦输入框	() => void
blur	失焦输入框	() => void

Slots

插槽名	说明
prefix	自定义前缀内容（覆盖 prefix-icon）