SEMI DESIGN 源码学习(九)时间选择器

SEMI DESIGN

LocaleTimePicker

TimePicker 组件位于 packages/semi-ui/timePicker,默认返回一个 LocaleTimePicker,它从 ConfigContext 中获取了时区状态,再返回一个有默认时区的 TimePicker

TimePicker

TimePicker 由一个输入框和弹出层组成,当使用 useCustomTriggerTimePicker 使用 Trigger 组件作为弹出层的触发器,否则使用 TimeInput 组件

TimeInput

TimeInput 使用一个 Input 组件

TimePicker 激活时弹出时间选择组件

它通过 getPanelElement 方法返回 Combobox 组件

如果是时间范围就返回两个 Combobox

Combobox

Combobox 核心是三列选择器,分别通过 renderHourSelect, renderMinuteSelect, renderSecondSelect 渲染,最后使用一个 ScrollList 包含他们,用来添加滚动效果

state,foundation,adapter

TimePickerstate 存储了组件内部数据,不算复杂

foundation 是一个 TimePickerFoundation 实例,用来管理组件状态

adapter 监听组件的事件

本文完,感谢阅读🌹

相关推荐
SUPER52664 小时前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx184 小时前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友7 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar7 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界9 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙10 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump10 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD10 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~10 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
德育处主任Pro10 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama