V1.0.0
WinDesign A2UI Vue

WRate 组件 ​

评分组件，基于 WinDesignNext Rate 封装，用于对事物进行评级操作，支持 modelValue 数据绑定和 action 事件响应。

基础用法 ​

API ​

属性类型默认值说明
componentstringWRate组件类型（必填）
modelValueDataBindingValue0当前分值，支持 path 双向绑定
maxnumber5最大分值
allowHalfbooleanfalse是否允许半星
disabledbooleanfalse是否禁用
showScorebooleanfalse是否显示当前分数
showTextbooleanfalse是否显示辅助文字
textsstring[]-各分数段辅助文字
colorsstring[] | object-各分数段颜色
voidColorstring-未选中颜色
lowThresholdnumber2低分阈值
highThresholdnumber4高分阈值
scoreTemplatestring{value}分数显示模板
clearablebooleanfalse再次点击是否可清空
sizestringdefault尺寸：large / default / small / mini
actionAction-评分变化事件

path 支持说明 ​

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

属性path 支持说明
modelValue✅评分值双向绑定
action.event.context[].value✅事件上下文可引用 dataModel
max / texts / allowHalf 等❌静态配置；动态变更请用 updateProp

modelValue 数据绑定 ​

json
{
  "id": "rate_satisfaction",
  "component": "WRate",
  "allowHalf": true,
  "showText": true,
  "modelValue": { "path": "/satisfaction" },
  "action": {
    "event": {
      "name": "onSatisfactionChange",
      "context": [{ "key": "satisfaction", "value": { "path": "/satisfaction" } }]
    }
  }
}

配合 updateDataModel 设置初始值：

json
{
  "version": "v0.9",
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/",
    "value": {
      "satisfaction": 4
    }
  }
}

action 定义 ​

评分变化时触发，默认 type 为 change。

json
{
  "action": {
    "event": {
      "name": "onSatisfactionChange",
      "type": "change",
      "context": [{ "key": "satisfaction", "value": { "path": "/satisfaction" } }]
    }
  }
}

配合 WForm 使用 ​

json
[
  {
    "id": "form_item_satisfaction",
    "component": "WFormItem",
    "label": "就诊满意度",
    "prop": "satisfaction",
    "children": ["rate_satisfaction"]
  },
  {
    "id": "rate_satisfaction",
    "component": "WRate",
    "allowHalf": true,
    "modelValue": { "path": "/satisfaction" },
    "action": {
      "event": {
        "name": "onSatisfactionChange",
        "context": [{ "key": "satisfaction", "value": { "path": "/satisfaction" } }]
      }
    }
  }
]

事件处理 ​

评分变化事件 ​

typescript
processor.onEvent((event) => {
  const { name, context } = event.message.userAction ?? {};
  if (name === 'onSatisfactionChange') {
    console.log('满意度已更新:', context?.satisfaction);
  }
});

数据同步机制 ​

WRate 在评分变化后会自动将值同步到 dataModel，流程与 WInputNumber、WSwitch 一致：

  1. 用户点击星级
  2. 组件触发 change 事件
  3. modelValue.path 指向的 dataModel 字段自动更新
  4. 若配置了 action，同步派发 A2UI 客户端事件

Design by UED