仅桌面端保证样式
Rate 评分
星级评分控件:支持半星、鼠标悬停预览、键盘方向键步进(allow-half 时步进 0.5);填充色按 low/high 阈值分三档取色,可展示分级文案或总分。组件获得焦点后可用方向键调整分值。
基础用法
v-model 绑定分值;allow-half 开启半星(悬停星左半取 0.5),clearable 时再次点击当前分值清零。
尺寸
size 影响图标大小(large 24px / default 18px / small 14px)。
最大分值
max 决定星星数量,分值范围 0 到 max;texts 文案数量应与 max 匹配。
7 分(满分 10)
分档颜色
colors 接受三档色数组 [低, 中, 高](按 low-threshold / high-threshold 分档),或 { 阈值: 色 } 对象(取分值命中的最小阈值档);void-color 为未选中星颜色。
分级文案与总分
show-text 显示 texts 中的分级文案(按当前分值向上取整取用);show-score 优先级更高,按 score-template({value} 为分值占位)显示总分。
Normal
满意
4.5 分
自定义图标
icon / void-icon 传 registry 图标名,选中与未选中可用不同图标;图标颜色随分档取色。
只读与禁用
readonly 用于展示场景(无交互但保持正常配色),disabled 禁用并按 disabled-color 置灰选中星。
API
Rate Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 评分值(allow-half 时可为 0.5 的倍数) | number | 0 |
| max | 最大分值(星星数量) | number | 5 |
| allow-half | 支持半星(悬停左半取 0.5,键盘步进 0.5) | boolean | false |
| low-threshold | 低档阈值(低于等于该值取 colors 第 1 档色) | number | 2 |
| high-threshold | 高档阈值(低于等于该值取第 2 档色,否则第 3 档) | number | 4 |
| colors | 选中星颜色:数组 [低, 中, 高] 或 { 阈值: 色 } 对象 | array | object | 三档黄色 |
| void-color | 未选中星颜色 | string | #C6D1DE |
| disabled-color | 禁用态选中星颜色 | string | #C9CDD4 |
| icon | 选中星图标名 | string | star-filled |
| void-icon | 未选中星图标名 | string | star-filled |
| size | 尺寸,影响图标大小(large / default / small) | string | default |
| clearable | 再次点击当前分值时清零 | boolean | false |
| show-text | 显示分级文案 | boolean | false |
| texts | 分级文案(按分值向上取整取用,可自定义中文) | array | 内置英文五档 |
| show-score | 显示总分(优先于 show-text) | boolean | false |
| score-template | 总分模板,{value} 为分值占位 | string | {value} |
| text-color | 辅助文字颜色 | string | #1F2D3D |
| readonly | 只读(无交互但保持正常配色) | boolean | false |
| disabled | 禁用(无交互并按 disabled-color 置灰) | boolean | false |
| label | 无障碍标签(aria-label) | string | rating |
Rate Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| update:modelValue | 评分变化,返回新分值(clearable 清零时为 0) | (value: number) => void | — |
| change | 与 update:modelValue 同步触发,同时触发表单项 change 校验 | (value: number) => void | — |