Rate 评分
该组件是低代码平台中用于用户打分或评级的表单项,基于 Element Plus 的 <el-rate> 封装,支持自定义最大分值、半星选择、颜色分段、辅助文字/分数显示,并深度集成表单容器(<el-form>)的数据绑定与校验体系。
基础属性
| 属性 | 类型 | 说明 |
|---|---|---|
最大分值 max | number | 评分总星数(整数,默认为 5) |
是否支持半选 allowHalf | boolean | 允许用户选择半颗星(如 3.5 分) |
低分界限值 lowThreshold | number | 小于该值视为“低分”(默认 2) |
高分界限值 highThreshold | number | 大于该值视为“高分”(默认 4) |
未选中时的颜色 voidColor | string | 空星(未评分部分)的颜色(如 #C6D1DE) |
各分段对应的颜色 colors | string[] | 最多 3 项,依次对应:低分、中分、高分颜色(如 ['#F7BA2A', '#F7BA2A', '#F7BA2A']) |
是否显示辅助文字 showText | boolean | 显示自定义文字描述(如“差”、“一般”、“优秀”) ⚠️ 与“显示分数”互斥 |
是否显示当前分数 showScore | boolean | 在右侧显示当前数值(如 4.0)⚠️ 与“辅助文字”互斥 |
辅助文字的颜色 textColor | string | 辅助文字的文本颜色(仅当 showText 启用时生效) |
辅助文字 texts | string[] | 最多 3 项,分别对应低、中、高分段的提示文字(如 ['差', '一般', '优秀']) |
| 表单项基础配置 | — | 包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine) |
🔗 颜色与分段逻辑:
- 评分 ≤
lowThreshold→ 使用colors[0]+texts[0]lowThreshold< 评分 <highThreshold→ 使用colors[1]+texts[1]- 评分 ≥
highThreshold→ 使用colors[2]+texts[2]
高级属性
| 属性 | 类型 | 说明 |
|---|---|---|
| 表单项高级配置 | — | 包含字段名(prop)、标签文本(label)等核心绑定配置(来自 formItemAdvDefine) |
事件
| 事件 | 触发时机 | 说明 |
|---|---|---|
change | 评分值发生变化时 | 返回当前分数(如 4 或 3.5) |
