V1.0.0
WinDesign A2UI Vue

WTimePicker 组件 ​

时间选择器组件，基于 WinDesignNext TimePicker Pro 封装（渲染层内部使用 WTimePickerPro），用于选择或输入时刻、时刻范围，支持数据绑定和事件响应。

推荐配合 valueFormat 使用：建议设置 valueFormat: "HH:mm:ss"，使 modelValue 以字符串形式存储在 dataModel 中。

基础用法 ​

Props API ​

属性名类型默认值说明
idstring-组件唯一标识（必填）
componentstringWTimePicker组件类型（必填）
modelValueobject-绑定值（A2UI 数据绑定，支持 path）
isRangebooleanfalse是否为时刻范围选择
sizestringdefault输入框尺寸
readonlybooleanfalse是否只读
disabledbooleanfalse是否禁用
editablebooleantrue文本框是否可输入
clearablebooleantrue是否可清空
placeholderstring''占位文本
startPlaceholderstring-范围选择开始占位
endPlaceholderstring-范围选择结束占位
formatstring/object-输入框显示格式（支持 path）
valueFormatstring/object-绑定值格式（支持 path）
arrowControlbooleanfalse是否使用箭头选择
rangeSeparatorstring-范围分隔符
teleportedbooleantrue下拉层是否挂载到 body
appendTostring-下拉层挂载目标
popperClassstring-下拉框自定义类名
prefixIconstring/object-前缀图标
clearIconstring/objectCircleCloseFilled清空图标
tabindexstring/number0Tab 键顺序
namestring-原生 name 属性
ariaLabelstring-无障碍标签
plainbooleanfalse朴素模式
emitFormattedValuebooleanfalsechange 事件是否附带格式化字符串
actionobject-A2UI v0.9 事件定义

path 支持说明 ​

通用绑定格式见 path 数据绑定速查。

属性支持 path说明
modelValue✅双向绑定选中值（单选或范围数组）
format✅动态控制输入框显示格式
valueFormat✅动态控制绑定值格式
action.event.context[].value✅事件上下文可引用 dataModel
action.event.api.constParams[].value✅API 固定参数可引用 dataModel
placeholder / isRange / disabled 等❌静态配置；动态变更请用 updateProp

format / valueFormat 绑定示例：

json
{
  "format": { "path": "/timeDisplayFormat" },
  "valueFormat": { "path": "/timeValueFormat" },
  "modelValue": { "path": "/startTime" }
}

modelValue 绑定规则：

  • 单选（isRange: false）：path 指向单个时刻值
  • 范围选择（isRange: true）：path 指向长度为 2 的数组
  • 设置 valueFormat 后，值为对应格式字符串（如 "09:30:00"）；未设置时在 dataModel 中以 ISO 8601 字符串存储
json
// 单选时刻
{ "modelValue": { "path": "/startTime" } }

// 时刻范围
{ "modelValue": { "path": "/timeRange" } }

// 初始值字面量
{ "modelValue": { "literalString": "09:30:00" } }

modelValue 数据绑定 ​

json
{
  "id": "time_start",
  "component": "WTimePicker",
  "valueFormat": "HH:mm:ss",
  "placeholder": "请选择开始时间",
  "clearable": true,
  "modelValue": { "path": "/startTime" },
  "action": {
    "event": {
      "name": "onStartTimeChange",
      "context": [{ "key": "startTime", "value": { "path": "/startTime" } }]
    }
  }
}

action 定义 ​

用户确认选定值时触发，默认 type 为 change。

json
{
  "action": {
    "event": {
      "name": "onTimeChange",
      "type": "change",
      "context": [{ "key": "time", "value": { "path": "/startTime" } }]
    }
  }
}

使用示例 ​

基础时刻选择 ​

json
{
  "id": "time_001",
  "component": "WTimePicker",
  "valueFormat": "HH:mm:ss",
  "placeholder": "请选择时间",
  "clearable": true,
  "modelValue": { "path": "/startTime" },
  "action": {
    "event": { "name": "onTimeChange" }
  }
}

时刻范围选择 ​

json
{
  "id": "time_range_001",
  "component": "WTimePicker",
  "isRange": true,
  "valueFormat": "HH:mm:ss",
  "startPlaceholder": "开始时间",
  "endPlaceholder": "结束时间",
  "modelValue": { "path": "/timeRange" },
  "action": {
    "event": {
      "name": "onTimeRangeChange",
      "context": [{ "key": "range", "value": { "path": "/timeRange" } }]
    }
  }
}

配合 updateDataModel：

json
{
  "version": "v0.9",
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/",
    "value": {
      "timeRange": ["09:00:00", "18:00:00"]
    }
  }
}

箭头控制模式 ​

json
{
  "id": "time_arrow",
  "component": "WTimePicker",
  "arrowControl": true,
  "valueFormat": "HH:mm:ss",
  "placeholder": "请选择时间",
  "modelValue": { "path": "/operatingTime" }
}

配合 WForm 使用 ​

json
[
  {
    "id": "form_item_time",
    "component": "WFormItem",
    "label": "手术时间",
    "prop": "operatingTime",
    "children": ["time_operating"]
  },
  {
    "id": "time_operating",
    "component": "WTimePicker",
    "valueFormat": "HH:mm:ss",
    "placeholder": "请选择",
    "clearable": true,
    "modelValue": { "path": "/operatingTime" },
    "action": {
      "event": {
        "name": "onOperatingTimeChange",
        "context": [{ "key": "time", "value": { "path": "/operatingTime" } }]
      }
    }
  }
]

事件处理 ​

选择变化事件 ​

typescript
processor.onEvent((event) => {
  const eventName = event.message.userAction?.name;
  const context = event.message.userAction?.context;

  if (eventName === 'onTimeChange') {
    // context: { time: "09:30:00" } 或 { range: ["09:00:00", "18:00:00"] }
    console.log('选中值:', context);
    event.resolve([]);
  }
});

数据同步 ​

WTimePicker 在用户确认选择后会自动将值同步到 dataModel，流程与 WInput、WDatePicker 一致。

不支持 A2UI JSON 配置的能力 ​

能力原生属性替代方案
禁用部分小时disabledHours暂不支持，需自定义渲染层扩展
禁用部分分钟disabledMinutes暂不支持
禁用部分秒disabledSeconds暂不支持
默认打开时刻defaultValue通过 updateDataModel 设置 modelValue 初始值

Design by UED