WTimeline 组件
时间线组件,基于 WinDesignNext Timeline 封装,用于垂直展示时间流信息(如就诊记录、操作日志、审批流程等)。
子组件结构:
WTimeline容器 +WTimelineItem节点,用法类似WCollapse+WCollapseItem。
基础用法
Props API
WTimeline
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
component | string | WTimeline | 组件类型(必填) |
reverse | boolean | false | 是否倒序排列 |
mode | string | start | 布局模式:start / alternate / alternate-reverse / end |
children | string[] | — | WTimelineItem 子组件 ID 列表 |
WTimelineItem
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
component | string | WTimelineItem | 组件类型(必填) |
timestamp | string | DataBindingValue | — | 时间戳文字 |
hideTimestamp | boolean | false | 是否隐藏时间戳 |
type | string | DataBindingValue | — | 节点类型:primary/success/warning/danger/info/error |
color | string | DataBindingValue | — | 自定义节点颜色 |
size | string | normal | 节点尺寸:normal / large |
placement | string | bottom | 时间戳位置:top / bottom / header |
hollow | boolean | false | 空心节点 |
children | string[] | — | 节点内容子组件 ID 列表 |
path 支持说明
| 组件 | 支持 path 的属性 | 说明 |
|---|---|---|
WTimeline | — | 纯容器,属性均为静态配置 |
WTimelineItem | timestamp, type, color | 动态时间、状态类型与颜色 |
动态时间戳与状态
json
{
"component": "WTimelineItem",
"timestamp": { "path": "/dischargeTime" },
"type": { "path": "/dischargeType" },
"children": ["text_discharge"]
}使用场景
| 场景 | 推荐配置 |
|---|---|
| 就诊/操作记录 | 多个 WTimelineItem + Text 内容 |
| 审批流程 | type: "success" / "warning" 区分状态 |
| 动态数据驱动 | timestamp/type 使用 path 绑定 dataModel |
| 交替布局 | WTimeline mode: "alternate" |
注意事项
- WTimelineItem 必须作为 WTimeline 的
children使用 - 节点内容通过
children引用 Text、WText 等子组件 - A2UI JSON 不支持
icon组件类型属性(需静态字符串图标名)