BizTimezoneSelect 时区选择

时区选择器：内置常用 36 个时区（按大区分组：亚洲 / 欧洲 / 美洲 / 大洋洲 / 非洲 / 标准），选项富展示城市 + 实时 GMT 偏移（Intl 动态计算，夏令时自适应）+ 该时区当前时间；label 含城市与 IANA id，原生 filterable 检索。跨国会议、报表口径、值班排班的时区选择。

基础用法

大区分组选项，选中后 change 回传完整时区对象。

<script setup lang="ts">
/** 场景：基础——大区分组 + 实时偏移与当地时间 */
import { ref } from 'vue'
import { BizTimezoneSelect } from 'vue3-ep-biz-lib'

const zone = ref('Asia/Shanghai')
</script>

<template>
  <BizTimezoneSelect v-model="zone" style="width: 300px" />
</template>

显示代码

检索

试试输入 东京 / London / UTC

输入城市（东京）或 id（Shanghai / UTC）过滤。

<script setup lang="ts">
/** 场景：检索——城市 / IANA id */
import { ref } from 'vue'
import { BizTimezoneSelect } from 'vue3-ep-biz-lib'

const zone = ref('')
</script>

<template>
  <BizTimezoneSelect v-model="zone" style="width: 300px" placeholder="试试输入 东京 / London / UTC" />
</template>

显示代码

默认本地时区

浏览器本地时区：Asia/Shanghai → 初始选中：Asia/Shanghai

expose localZoneId 识别浏览器时区作为初始值。

<script setup lang="ts">
/** 场景：默认选中浏览器本地时区 */
import { ref } from 'vue'
import { BizTimezoneSelect } from 'vue3-ep-biz-lib'

/* expose 的 localZoneId 在实例挂载前为空，直接用 Intl 同源 API 初始化 */
const localId = Intl.DateTimeFormat().resolvedOptions().timeZone
const zone = ref(localId === '' ? 'Asia/Shanghai' : localId)
</script>

<template>
  <div>
    <BizTimezoneSelect v-model="zone" style="width: 300px" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      浏览器本地时区：{{ localId }} → 初始选中：{{ zone }}
    </p>
  </div>
</template>

显示代码

自定义时区集

选择跨国协作时区

zones 传入业务常用时区子集。

<script setup lang="ts">
/** 场景：自定义时区子集 */
import { ref } from 'vue'
import { BizTimezoneSelect } from 'vue3-ep-biz-lib'
import type { BizTimezone } from 'vue3-ep-biz-lib'

const zone = ref('')

const zones: BizTimezone[] = [
  { id: 'Asia/Shanghai', city: '中国北京', region: '协作方' },
  { id: 'Europe/Berlin', city: '德国柏林', region: '协作方' },
  { id: 'America/Los_Angeles', city: '美国洛杉矶', region: '协作方' },
]
</script>

<template>
  <BizTimezoneSelect v-model="zone" :zones="zones" style="width: 300px" placeholder="选择跨国协作时区" />
</template>

显示代码

无时间预览

show-local-time=false 收起选项内时间列（仅城市 + 偏移）。

<script setup lang="ts">
/** 场景：无时间预览 */
import { ref } from 'vue'
import { BizTimezoneSelect } from 'vue3-ep-biz-lib'

const zone = ref('Europe/London')
</script>

<template>
  <BizTimezoneSelect v-model="zone" :show-local-time="false" style="width: 300px" />
</template>

显示代码

事件

请选择时区

change 事件日志（含 id 与实时偏移）。

<script setup lang="ts">
/** 场景：change 事件日志 */
import { ref } from 'vue'
import { BizTimezoneSelect } from 'vue3-ep-biz-lib'
import type { BizTimezone } from 'vue3-ep-biz-lib'

const zone = ref('')
const logs = ref<string[]>([])

const onChange = (item: BizTimezone | null): void => {
  logs.value.unshift(item === null ? '已清空' : `${item.city}（${item.id}）`)
  if (logs.value.length > 4) logs.value.pop()
}
</script>

<template>
  <div>
    <BizTimezoneSelect v-model="zone" style="width: 300px" @change="onChange" />
    <p v-for="(log, i) in logs" :key="i" style="margin: 6px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      {{ log }}
    </p>
  </div>
</template>

显示代码

禁用与锁定

会议口径锁定的时区只读展示（不可清空）。

<script setup lang="ts">
/** 场景：禁用与锁定——会议口径时区只读 */
import { ref } from 'vue'
import { BizTimezoneSelect } from 'vue3-ep-biz-lib'

const zone = ref('Europe/Berlin')
</script>

<template>
  <BizTimezoneSelect v-model="zone" disabled :clearable="false" style="width: 300px" />
</template>

显示代码

取时区信息

getZone()：（未挂载 / 未选）

expose getZone()：取当前选中（或指定 id）的完整时区信息。

<script setup lang="ts">
/** 场景：getZone 取值——当前选中 + 任意 id 的时区信息 */
import { computed, ref } from 'vue'
import { BizTimezoneSelect } from 'vue3-ep-biz-lib'
import type { BizTimezoneSelectInstance } from 'vue3-ep-biz-lib'

const zone = ref('Asia/Tokyo')
const refEl = ref<BizTimezoneSelectInstance | null>(null)

const currentZone = computed(() => {
  const item = refEl.value?.getZone()
  return item === null || item === undefined ? '（未挂载 / 未选）' : `${item.region} · ${item.city}（${item.id}）`
})
</script>

<template>
  <div>
    <BizTimezoneSelect ref="refEl" v-model="zone" style="width: 300px" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      getZone()：{{ currentZone }}
    </p>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	string	''	IANA 时区 id（如 Asia/Shanghai）
zones	BizTimezone[]	内置 36 个	时区列表（id / city / region）
placeholder	string	'请选择时区'	占位
disabled	boolean	false	禁用
clearable	boolean	true	可清空
show-local-time	boolean	true	选项内显示当地当前时间

Events

事件名	参数	说明
update:modelValue	(id: string)	时区 id 变化
change	(zone: BizTimezone | null)	完整时区对象

Expose

名称	类型	说明
getZone	(id?: string) => BizTimezone | null	取时区对象（缺省当前选中）
localZoneId	string	浏览器所在时区 id

TIP

偏移与时间均为打开下拉时的实时计算（含夏令时），不做定时刷新；需要持续走时的时钟展示由业务层自行 setInterval 渲染。其余能力经 attrs 透传至 el-select。