前端UI组件【免费下载链接】uiThe Intuitive Vue UI Library powered by Reka UI Tailwind CSS.项目地址https://gitcode.com/gh_mirrors/ui4/ui点击查看免费下载导读InputTime组件名为UInputTime是 Nuxt UI 中面向时间输入场景的 Segment 式表单组件它将时间拆解为小时、分钟等独立段Segment通过方向键与数字键即可逐段编辑支持单值选择与起止时间范围选择两种模式。本文以仓库中的组件文档 docs/content/docs/2.components/input-time.md 为骨架结合 InputTime.vue 源码、input-time.ts 主题定义与 InputTime.spec.ts 测试用例完整讲解其受控/非受控用法、range范围模式、hour-cycle小时制切换、颜色/尺寸/变体定制、前后缀图标与头像插槽以及基于internationalized/date的本地化格式原理。读完后你可以在 Nuxt 或 Vue 项目中直接落地使用并能在app.config.ts中全局定制其默认样式与图标。组件概览与数据模型InputTime属于 form 类组件底层基于 Reka UI 的TimeField/TimeRangeField构建见文档 frontmatter 中指向 reka-ui.com 的 links以及源码中TimeField as SingleTimeField, TimeRangeField as RangeTimeField的导入。其时间值类型来自internationalized/date包的Time类源码中可见该类型在接口中的体现单值模式TimeValue例如new Time(12, 30)范围模式{ start: Time, end: Time }结构的TimeRangeValue。值得注意的两点实现细节同名段模板复用源码通过createReusableTemplate定义DefineSegmentsTemplate单值与范围模式共用同一套段渲染逻辑。范围模式下每个时间值又区分为start/end两组段中间用分隔符图标连接见 InputTime.vue 的模板结构。段Segment的组成段包含小时、分钟等segment.part如hour、minute另有literal段用于显示冒号等固定字符。测试中过滤data-segment属性为literal的段来定位可编辑段正印证了这一点见 InputTime.spec.ts。基础用法受控模式v-model使用v-model指令控制选中时间这是组件最核心的用法template UInputTime v-modelvalue / /template script setup langts import { Time } from internationalized/date const value ref(new Time(12, 30, 0)) /scriptmodelValue是可写属性v-model绑定后组件会通过update:modelValue事件回传新值值为TimeValueTime实例。测试用例中通过wrapper.setValue(time)后断言update:modelValue事件携带相同的Time实例验证了受控数据流的闭合见 InputTime.spec.ts。非受控模式default-value当你不需要控制组件的内部状态时使用default-value设置初始值UInputTime :default-valuenew Time(9, 45, 0) /defaultValue仅在组件首次渲染时生效源码注释The value of the input when initially rendered。在 playground 矩阵页 playgrounds/nuxt/app/pages/components/input-time.vue 中两种模式都有对应的演示实例可对照查看差异。范围选择range通过range属性启用开始/结束时间范围选择v-model绑定对象需包含start与endtemplate UInputTime v-modelrange range / /template script setup langts import { Time } from internationalized/date const range ref({ start: new Time(9, 0, 0), end: new Time(17, 30, 0) }) /script源码中range属性直接决定底层使用TimeRangeFieldRoot还是TimeFieldRootconst TimeField computed(() props.range ? RangeTimeField : SingleTimeField)见 InputTime.vue。modelValue/defaultValue的类型也随range泛型R变化为true时对应TimeRangeFieldRootProps的类型见 InputTime.vue。范围模式下的测试同样覆盖了受控与非受控两种写法{ start: new Time(12, 30), end: new Time(14, 30) }见 InputTime.spec.ts。小时制与时间粒度hour-cyclehour-cycle属性控制小时循环方式默认值为1212 小时制含 AM/PM 段。设置为24得到 24 小时制显示UInputTime :default-valuenew Time(16, 30, 0) :hour-cycle24 /该属性直接透传给 Reka UI 的TimeFieldRoot测试中对12与24两种取值都做了渲染断言见 InputTime.spec.ts。granularity 与时间显示从_TimeFieldRootProps的透传可以看到InputTime 还支持 Reka UITimeField的其他原生能力包括granularity时间粒度可设为hour、minute或second决定段的数量与可编辑精度hideTimeZone是否隐藏时区段minValue/maxValue允许的最小/最大时间超范围输入会被限制placeholder无值时展示的占位时间。这些属性在测试中均有覆盖如with granularity、with min/max value、with hide time zone见 InputTime.spec.ts说明它们属于该组件对外可用的正式 API而非内部实现细节。样式定制颜色、变体与尺寸Colorcolor属性改变组件配色默认值为primaryUInputTime colorneutral /默认调色板包含primary与neutral。测试中针对每个变体分别渲染了primary与neutral两种配色并生成快照见 InputTime.spec.ts。Variantvariant属性改变组件外观变体默认值为outline可选outline、soft、subtle、ghost、noneUInputTime variantsubtle /主题定义中input-time.ts通过replaceFocus函数把通用 Input 主题中的focus:替换为has-focus:选择器并针对每个变体补充了段segment的聚焦背景如 outline 的focus:bg-elevated、subtle 的focus:bg-accented详见 src/theme/input-time.ts。这也解释了文档中的highlight属性它用于模拟聚焦态例如校验失败时高亮边框源码中highlight计算属性会优先取 FormField 上下文中的值见 InputTime.vue。Sizesize属性改变组件尺寸可选xs、sm、md、lg、xl默认mdUInputTime sizexl /各尺寸主要影响段segment的固定宽度与段间距例如xs/sm段宽w-8、md/lg段宽w-9、xl段宽w-10且尺寸还承担 FieldGroup字段组的继承逻辑——size计算属性依次回退到fieldGroupSize、formFieldSize、props.size见 InputTime.vue 与 src/theme/input-time.ts。图标、头像与插槽Icon前置/后置图标icon属性在组件内展示一个图标Iconify 名称并通过leading/trailing控制位置UInputTime iconi-lucide-clock / UInputTime iconi-lucide-clock trailing /更细粒度地可用leading-icon/trailing-icon为左右两侧分别指定不同图标。图标位置逻辑来自共享的useComponentIconscomposable未显式指定leading/trailing时默认居左!props.trailing分支指定trailing后移居右侧见 useComponentIcons.ts。加载状态时还会自动替换为appConfig.ui.icons.loading对应的加载图标。Separator Icon范围分隔符范围模式下开始与结束时间之间默认以i-lucide-minus图标分隔可用separator-icon更换UInputTime range separator-iconi-lucide-arrow-right /模板中分隔符的渲染为props.separatorIcon || appConfig.ui.icons.minus见 InputTime.vue即未传separatorIcon时回退到全局配置ui.icons.minus。因此你可以全局定制该图标Nuxt 项目在app.config.ts的ui.icons.minus下修改Vue 项目在vite.config.ts的ui.icons.minus下修改。此外也可通过separator插槽完全自定义分隔符内容测试中提供了separator: () 的用例见 InputTime.spec.ts。Avatar左侧头像avatar属性在组件左侧展示一个 Avatar 组件实例UInputTime :avatar{ src: https://github.com/vuejs.png, loading: lazy } sizemd variantoutline /源码中当传入avatar且未提供leading插槽时渲染UAvatar作为 leading 内容且头像尺寸由ui.leadingAvatarSize控制见 InputTime.vue。playground 中还展示了 avatar 与 icon 并存的组合用法见 playgrounds/nuxt/app/pages/components/input-time.vue。内置插槽组件暴露了leading、default、trailing、separator四个插槽见 InputTime.vue 的InputTimeSlots定义每个插槽都接收{ ui }上下文便于在插槽内继续使用主题类名。测试中对前三个插槽均有渲染断言。状态与无障碍Disableddisabled属性禁用组件UInputTime disabled /禁用状态会同步作用于根节点与各段模板将disabled绑定到TimeField.Root同时段样式含data-disabled:cursor-not-allowed>UFormField namevalue label会议开始时间 help选择今天的会议开始时间 UInputTime v-modelvalue / /UFormField仓库中的input-time-form-field-example示例即演示了这一组合。底层通过useFormField与useFieldGroup集成color、size、highlight、disabled会优先继承 FormField / FieldGroup 上下文中的值见 InputTime.vue。测试中renderForm用例验证了「blur 校验触发错误显示、段间焦点移动不触发校验」的行为见 InputTime.spec.ts。无障碍与事件无障碍axe测试通过组件无 WCAG 违规项见 InputTime.spec.tsariaAttrs由 FormField 注入到根节点。焦点/失焦语义focus/blur事件在焦点进入或离开整个字段时触发而不是在段与段之间移动时触发——onFocusIn/onFocusOut通过relatedTarget判断焦点是否仍在组件内部见 InputTime.vue。测试专门验证了这一边界行为。change 事件值更新时组件会构造携带{ target: { value } }的change事件并同时触发Form层的 change/input 回调见 InputTime.vue。autofocusautofocus与autofocusDelay属性控制挂载后自动聚焦默认延迟0ms见 InputTime.vue。国际化locale 感知的时间格式InputTime的格式渲染依赖internationalized/date包实际显示的小时制、AM/PM 文案、冒号分隔等格式由App 组件的localeprop决定Nuxt 项目下locale在 i18n 集成中配置Vue 项目下同样通过 App 组件的locale传入。每个 locale 都有code属性如en、en-GB、fr它同时决定 Calendar、InputDate 与 InputTime 的日期/时间格式详见 i18n/Nuxt 集成文档 与 i18n/Vue 集成文档。这意味着切换 locale 后输入段显示的格式会自动随之变化无需修改组件自身代码。主题定制入口InputTime的样式基于 Tailwind Variantstv构建全部样式定义位于 src/theme/input-time.ts并在 src/theme/index.ts 中注册为inputTime主题键。可通过uiprop 对单个实例进行细粒度覆盖如:ui{ base: rounded-full }测试有对应用例也可在 Nuxt 项目中通过app.config.ts全局定制export default defineAppConfig({ ui: { inputTime: { // 覆盖基础类、变体或默认值 base: ..., icons: { minus: i-lucide-minus // 范围分隔符图标 } } } })需要注意ui覆盖会与组件内部通过tv({ extend: theme, ...(appConfig.ui?.inputTime || {}) })合并的全局配置叠加见 InputTime.vue优先级为实例uiprop 全局appConfig.ui.inputTime 内置主题默认值。小结InputTime是一个麻雀虽小五脏俱全的时间输入组件以 Reka UI 的 TimeField/TimeRangeField 为底座通过internationalized/date的Time对象承载数据支持单值与范围双模式、12/24 小时制、多种颜色/变体/尺寸组合并深度集成 FormField 校验、i18n locale 格式化与全局主题定制。结合本文对照的源码与测试你可以在实际项目中放心地将它用于排期、预约、日程等时间录入场景并按需做全局或实例级的样式定制。赞分享前端UI组件【免费下载链接】uiThe Intuitive Vue UI Library powered by Reka UI Tailwind CSS.项目地址https://gitcode.com/gh_mirrors/ui4/ui点击查看免费下载相关推荐Ant Design TimePicker 组件完全指南时间选择与时间范围选择的配置实战Ant Design TimePicker 组件完全指南时间选择与时间范围选择的配置实战 本文以 Ant Design 仓库中 TimePicker 官方文档前端UI组件设计系统Element UI DateTimePicker 实战指南datetime 与 datetimerange 模式下的日期时间选择、范围选择与默认时间控制Element UI DateTimePicker 实战指南datetime 与 datetimerange 模式下的日期时间选择、范围选择与默认时间控制 D前端UI组件设计系统Nuxt UI v4 ColorPicker 组件实战指南颜色选择器的 v-model、格式转换与主题定制Nuxt UI v4 ColorPicker 组件实战指南颜色选择器的 v model、格式转换与主题定制 导读 ColorPicker 是 Nuxt UI前端UI组件上一篇MissionControl终极指南免费解锁Switch全平台控制器支持下一篇Esri Leaflet 项目推荐创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/8 1:21:25 · 阅读 1.2k Nuxt UI 的 UInputTime 时间选择组件实战指南：v-model、范围选择、12/24 小时制与国际化格式化
前端UI组件【免费下载链接】uiThe Intuitive Vue UI Library powered by Reka UI Tailwind CSS.项目地址https://gitcode.com/gh_mirrors/ui4/ui点击查看免费下载导读InputTime组件名为UInputTime是 Nuxt UI 中面向时间输入场景的 Segment 式表单组件它将时间拆解为小时、分钟等独立段Segment通过方向键与数字键即可逐段编辑支持单值选择与起止时间范围选择两种模式。本文以仓库中的组件文档 docs/content/docs/2.components/input-time.md 为骨架结合 InputTime.vue 源码、input-time.ts 主题定义与 InputTime.spec.ts 测试用例完整讲解其受控/非受控用法、range范围模式、hour-cycle小时制切换、颜色/尺寸/变体定制、前后缀图标与头像插槽以及基于internationalized/date的本地化格式原理。读完后你可以在 Nuxt 或 Vue 项目中直接落地使用并能在app.config.ts中全局定制其默认样式与图标。组件概览与数据模型InputTime属于 form 类组件底层基于 Reka UI 的TimeField/TimeRangeField构建见文档 frontmatter 中指向 reka-ui.com 的 links以及源码中TimeField as SingleTimeField, TimeRangeField as RangeTimeField的导入。其时间值类型来自internationalized/date包的Time类源码中可见该类型在接口中的体现单值模式TimeValue例如new Time(12, 30)范围模式{ start: Time, end: Time }结构的TimeRangeValue。值得注意的两点实现细节同名段模板复用源码通过createReusableTemplate定义DefineSegmentsTemplate单值与范围模式共用同一套段渲染逻辑。范围模式下每个时间值又区分为start/end两组段中间用分隔符图标连接见 InputTime.vue 的模板结构。段Segment的组成段包含小时、分钟等segment.part如hour、minute另有literal段用于显示冒号等固定字符。测试中过滤data-segment属性为literal的段来定位可编辑段正印证了这一点见 InputTime.spec.ts。基础用法受控模式v-model使用v-model指令控制选中时间这是组件最核心的用法template UInputTime v-modelvalue / /template script setup langts import { Time } from internationalized/date const value ref(new Time(12, 30, 0)) /scriptmodelValue是可写属性v-model绑定后组件会通过update:modelValue事件回传新值值为TimeValueTime实例。测试用例中通过wrapper.setValue(time)后断言update:modelValue事件携带相同的Time实例验证了受控数据流的闭合见 InputTime.spec.ts。非受控模式default-value当你不需要控制组件的内部状态时使用default-value设置初始值UInputTime :default-valuenew Time(9, 45, 0) /defaultValue仅在组件首次渲染时生效源码注释The value of the input when initially rendered。在 playground 矩阵页 playgrounds/nuxt/app/pages/components/input-time.vue 中两种模式都有对应的演示实例可对照查看差异。范围选择range通过range属性启用开始/结束时间范围选择v-model绑定对象需包含start与endtemplate UInputTime v-modelrange range / /template script setup langts import { Time } from internationalized/date const range ref({ start: new Time(9, 0, 0), end: new Time(17, 30, 0) }) /script源码中range属性直接决定底层使用TimeRangeFieldRoot还是TimeFieldRootconst TimeField computed(() props.range ? RangeTimeField : SingleTimeField)见 InputTime.vue。modelValue/defaultValue的类型也随range泛型R变化为true时对应TimeRangeFieldRootProps的类型见 InputTime.vue。范围模式下的测试同样覆盖了受控与非受控两种写法{ start: new Time(12, 30), end: new Time(14, 30) }见 InputTime.spec.ts。小时制与时间粒度hour-cyclehour-cycle属性控制小时循环方式默认值为1212 小时制含 AM/PM 段。设置为24得到 24 小时制显示UInputTime :default-valuenew Time(16, 30, 0) :hour-cycle24 /该属性直接透传给 Reka UI 的TimeFieldRoot测试中对12与24两种取值都做了渲染断言见 InputTime.spec.ts。granularity 与时间显示从_TimeFieldRootProps的透传可以看到InputTime 还支持 Reka UITimeField的其他原生能力包括granularity时间粒度可设为hour、minute或second决定段的数量与可编辑精度hideTimeZone是否隐藏时区段minValue/maxValue允许的最小/最大时间超范围输入会被限制placeholder无值时展示的占位时间。这些属性在测试中均有覆盖如with granularity、with min/max value、with hide time zone见 InputTime.spec.ts说明它们属于该组件对外可用的正式 API而非内部实现细节。样式定制颜色、变体与尺寸Colorcolor属性改变组件配色默认值为primaryUInputTime colorneutral /默认调色板包含primary与neutral。测试中针对每个变体分别渲染了primary与neutral两种配色并生成快照见 InputTime.spec.ts。Variantvariant属性改变组件外观变体默认值为outline可选outline、soft、subtle、ghost、noneUInputTime variantsubtle /主题定义中input-time.ts通过replaceFocus函数把通用 Input 主题中的focus:替换为has-focus:选择器并针对每个变体补充了段segment的聚焦背景如 outline 的focus:bg-elevated、subtle 的focus:bg-accented详见 src/theme/input-time.ts。这也解释了文档中的highlight属性它用于模拟聚焦态例如校验失败时高亮边框源码中highlight计算属性会优先取 FormField 上下文中的值见 InputTime.vue。Sizesize属性改变组件尺寸可选xs、sm、md、lg、xl默认mdUInputTime sizexl /各尺寸主要影响段segment的固定宽度与段间距例如xs/sm段宽w-8、md/lg段宽w-9、xl段宽w-10且尺寸还承担 FieldGroup字段组的继承逻辑——size计算属性依次回退到fieldGroupSize、formFieldSize、props.size见 InputTime.vue 与 src/theme/input-time.ts。图标、头像与插槽Icon前置/后置图标icon属性在组件内展示一个图标Iconify 名称并通过leading/trailing控制位置UInputTime iconi-lucide-clock / UInputTime iconi-lucide-clock trailing /更细粒度地可用leading-icon/trailing-icon为左右两侧分别指定不同图标。图标位置逻辑来自共享的useComponentIconscomposable未显式指定leading/trailing时默认居左!props.trailing分支指定trailing后移居右侧见 useComponentIcons.ts。加载状态时还会自动替换为appConfig.ui.icons.loading对应的加载图标。Separator Icon范围分隔符范围模式下开始与结束时间之间默认以i-lucide-minus图标分隔可用separator-icon更换UInputTime range separator-iconi-lucide-arrow-right /模板中分隔符的渲染为props.separatorIcon || appConfig.ui.icons.minus见 InputTime.vue即未传separatorIcon时回退到全局配置ui.icons.minus。因此你可以全局定制该图标Nuxt 项目在app.config.ts的ui.icons.minus下修改Vue 项目在vite.config.ts的ui.icons.minus下修改。此外也可通过separator插槽完全自定义分隔符内容测试中提供了separator: () 的用例见 InputTime.spec.ts。Avatar左侧头像avatar属性在组件左侧展示一个 Avatar 组件实例UInputTime :avatar{ src: https://github.com/vuejs.png, loading: lazy } sizemd variantoutline /源码中当传入avatar且未提供leading插槽时渲染UAvatar作为 leading 内容且头像尺寸由ui.leadingAvatarSize控制见 InputTime.vue。playground 中还展示了 avatar 与 icon 并存的组合用法见 playgrounds/nuxt/app/pages/components/input-time.vue。内置插槽组件暴露了leading、default、trailing、separator四个插槽见 InputTime.vue 的InputTimeSlots定义每个插槽都接收{ ui }上下文便于在插槽内继续使用主题类名。测试中对前三个插槽均有渲染断言。状态与无障碍Disableddisabled属性禁用组件UInputTime disabled /禁用状态会同步作用于根节点与各段模板将disabled绑定到TimeField.Root同时段样式含data-disabled:cursor-not-allowed>UFormField namevalue label会议开始时间 help选择今天的会议开始时间 UInputTime v-modelvalue / /UFormField仓库中的input-time-form-field-example示例即演示了这一组合。底层通过useFormField与useFieldGroup集成color、size、highlight、disabled会优先继承 FormField / FieldGroup 上下文中的值见 InputTime.vue。测试中renderForm用例验证了「blur 校验触发错误显示、段间焦点移动不触发校验」的行为见 InputTime.spec.ts。无障碍与事件无障碍axe测试通过组件无 WCAG 违规项见 InputTime.spec.tsariaAttrs由 FormField 注入到根节点。焦点/失焦语义focus/blur事件在焦点进入或离开整个字段时触发而不是在段与段之间移动时触发——onFocusIn/onFocusOut通过relatedTarget判断焦点是否仍在组件内部见 InputTime.vue。测试专门验证了这一边界行为。change 事件值更新时组件会构造携带{ target: { value } }的change事件并同时触发Form层的 change/input 回调见 InputTime.vue。autofocusautofocus与autofocusDelay属性控制挂载后自动聚焦默认延迟0ms见 InputTime.vue。国际化locale 感知的时间格式InputTime的格式渲染依赖internationalized/date包实际显示的小时制、AM/PM 文案、冒号分隔等格式由App 组件的localeprop决定Nuxt 项目下locale在 i18n 集成中配置Vue 项目下同样通过 App 组件的locale传入。每个 locale 都有code属性如en、en-GB、fr它同时决定 Calendar、InputDate 与 InputTime 的日期/时间格式详见 i18n/Nuxt 集成文档 与 i18n/Vue 集成文档。这意味着切换 locale 后输入段显示的格式会自动随之变化无需修改组件自身代码。主题定制入口InputTime的样式基于 Tailwind Variantstv构建全部样式定义位于 src/theme/input-time.ts并在 src/theme/index.ts 中注册为inputTime主题键。可通过uiprop 对单个实例进行细粒度覆盖如:ui{ base: rounded-full }测试有对应用例也可在 Nuxt 项目中通过app.config.ts全局定制export default defineAppConfig({ ui: { inputTime: { // 覆盖基础类、变体或默认值 base: ..., icons: { minus: i-lucide-minus // 范围分隔符图标 } } } })需要注意ui覆盖会与组件内部通过tv({ extend: theme, ...(appConfig.ui?.inputTime || {}) })合并的全局配置叠加见 InputTime.vue优先级为实例uiprop 全局appConfig.ui.inputTime 内置主题默认值。小结InputTime是一个麻雀虽小五脏俱全的时间输入组件以 Reka UI 的 TimeField/TimeRangeField 为底座通过internationalized/date的Time对象承载数据支持单值与范围双模式、12/24 小时制、多种颜色/变体/尺寸组合并深度集成 FormField 校验、i18n locale 格式化与全局主题定制。结合本文对照的源码与测试你可以在实际项目中放心地将它用于排期、预约、日程等时间录入场景并按需做全局或实例级的样式定制。赞分享前端UI组件【免费下载链接】uiThe Intuitive Vue UI Library powered by Reka UI Tailwind CSS.项目地址https://gitcode.com/gh_mirrors/ui4/ui点击查看免费下载相关推荐Ant Design TimePicker 组件完全指南时间选择与时间范围选择的配置实战Ant Design TimePicker 组件完全指南时间选择与时间范围选择的配置实战 本文以 Ant Design 仓库中 TimePicker 官方文档前端UI组件设计系统Element UI DateTimePicker 实战指南datetime 与 datetimerange 模式下的日期时间选择、范围选择与默认时间控制Element UI DateTimePicker 实战指南datetime 与 datetimerange 模式下的日期时间选择、范围选择与默认时间控制 D前端UI组件设计系统Nuxt UI v4 ColorPicker 组件实战指南颜色选择器的 v-model、格式转换与主题定制Nuxt UI v4 ColorPicker 组件实战指南颜色选择器的 v model、格式转换与主题定制 导读 ColorPicker 是 Nuxt UI前端UI组件上一篇MissionControl终极指南免费解锁Switch全平台控制器支持下一篇Esri Leaflet 项目推荐创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考