TimeZone 时区选择器

时区选择器组件用于选择 IANA 时区，支持搜索过滤、键盘导航、中文别名搜索、自定义别名注入，适合多时区后台、出海业务等场景。

基础用法

通过 v-model 绑定选中的时区代码（IANA Timezone 标识）。

<TTimeZone v-model="timezone" label="选择时区" />

标签与描述

通过 label 和 description prop 添加表单标签和描述文字。点击标签自动聚焦输入框。

<TTimeZone
  v-model="timezone"
  label="工作时区"
  description="用于显示所有时间相关的数据"
/>

搜索过滤

输入城市、时区代码或 UTC 偏移关键词快速过滤时区列表。支持中文别名搜索，输入 shanghai、beijin 等可直达对应时区。支持键盘 ↑↓ 导航和 Enter 选择。

<TTimeZone v-model="timezone" label="搜索时区" />

属性透传

TTimeZone 未声明的属性（如 size、validation、prepend-text、block 等）会自动透传到内部的 TCombobox 组件，实现灵活的 UI 控制。

<TTimeZone v-model="timezone" label="小尺寸" size="sm" validation="valid" />

自定义别名

通过 custom-aliases 注入业务特有的搜索别名，用户输入自定义关键词也能检索到对应时区。

<TTimeZone
  v-model="timezone"
  label="搜索时区"
  :custom-aliases="{
    'Asia/Shanghai': ['我的城市', '魔都'],
    'America/New_York': ['纽约', '扭腰'],
  }"
/>

API

Props

Prop	说明	类型	默认值
v-model	选中的时区代码（IANA）	string	''
label	标签文字	string	undefined
description	描述文字	string	undefined
placeholder	搜索框占位符	string	'搜索时区...'
disabled	禁用	boolean	false
required	必填	boolean	false
customAliases	自定义搜索别名	Record<string, string[]>	{}

透传属性

以下属性通过 v-bind="$attrs" 透传给内部的 TCombobox，可直接在 TTimeZone 上使用：

属性	说明	类型
size	尺寸	'sm' | 'lg'
validation	验证状态	'valid' | 'invalid'
block	块级宽度	boolean
prependText	前置文本	string
appendText	后置文本	string