项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
仅桌面端保证样式

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 的倍数)number0
max最大分值(星星数量)number5
allow-half支持半星(悬停左半取 0.5,键盘步进 0.5)booleanfalse
low-threshold低档阈值(低于等于该值取 colors 第 1 档色)number2
high-threshold高档阈值(低于等于该值取第 2 档色,否则第 3 档)number4
colors选中星颜色:数组 [低, 中, 高] 或 { 阈值: 色 } 对象array | object三档黄色
void-color未选中星颜色string#C6D1DE
disabled-color禁用态选中星颜色string#C9CDD4
icon选中星图标名stringstar-filled
void-icon未选中星图标名stringstar-filled
size尺寸,影响图标大小(large / default / small)stringdefault
clearable再次点击当前分值时清零booleanfalse
show-text显示分级文案booleanfalse
texts分级文案(按分值向上取整取用,可自定义中文)array内置英文五档
show-score显示总分(优先于 show-text)booleanfalse
score-template总分模板,{value} 为分值占位string{value}
text-color辅助文字颜色string#1F2D3D
readonly只读(无交互但保持正常配色)booleanfalse
disabled禁用(无交互并按 disabled-color 置灰)booleanfalse
label无障碍标签(aria-label)stringrating

Rate Events

参数说明类型默认值
update:modelValue评分变化,返回新分值(clearable 清零时为 0)(value: number) => void—
change与 update:modelValue 同步触发,同时触发表单项 change 校验(value: number) => void—