Rating 评分
以星级选择分值的输入控件
用法
半星
precision="0.5" 时，再次点击已选中的整星会切换为半星。
示例加载中...
自定义图标
icon 统一设置，filledIcon / emptyIcon / halfIcon 逐项覆盖；支持内置图标、Iconify class 与 emoji。
示例加载中...
点击动画
默认播放弹跳、光晕与波纹，:animated="false" 关闭。
示例加载中...
自定义样式
颜色、size 与 gap 都有对应属性；#text 插槽改写分数文本。
示例加载中...
最佳实践
- 只有半步差异有意义时才用
precision="0.5"；粗略的满意度用整星。 - 不可输入时用
disabled，展示历史评分时用readonly。 - 精确数值重要时开启
showText或提供#text插槽。 - 图标集的状态对比不清晰时，改用统一的
icon，靠颜色区分状态。 - 在密集表单与表格中关闭
animated。
API 参考
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | 当前评分，配合 `v-model` 使用。 | ||
| maxStars | 星级数量。 | ||
| precision | 步进精度；`0.5` 启用半星，其他值只决定分数文本的小数位数。 | ||
| showText | 在星级后显示分数文本。 | ||
| disabled | 禁止评分，根节点标记 `aria-disabled`。 | ||
| readonly | 只展示评分，根节点标记 `aria-readonly`。 | ||
| icon | - | 填充层与空态层共用的图标，状态图标优先。 | |
| filledIcon | 已填充图标；未设置时依次回退到 `icon`、`star`。 | ||
| emptyIcon | 空态图标；未设置时依次回退到 `icon`、`star`。 | ||
| halfIcon | - | 半星图标；未设置时从左侧裁切填充层。 | |
| filledColor | 已填充图标的颜色。 | ||
| emptyColor | 空态图标的颜色。 | ||
| hoverColor | 悬停时填充层的颜色。 | ||
| textColor | 分数文本的颜色。 | ||
| size | 星级图标大小；数字按 px 处理。 | ||
| gap | 星级间距；数字按 px 处理。 | ||
| animated | 选中后播放弹跳与波纹动效。 | ||
| starLabel | - | 每颗星的无障碍标签，默认为英文 `Rate N star(s)`。 |
事件
| 事件名 | 参数 | 说明 |
|---|---|---|
update:modelValue | (value: number) | 点击可交互的星级后携带新评分触发。 |
change | (value: number) | 与 update:modelValue 同时触发。 |
插槽
| 插槽名 | 参数 | 说明 |
|---|---|---|
text | { value: number, max: number } | showText 开启时替换默认的 value / max 文本。 |
概述
- 星级行渲染为
role="radiogroup"，每颗星是一个role="radio"按钮。 - 键盘：整行只占一个 Tab 停留点；ArrowRight / ArrowUp 选中后一颗星，ArrowLeft / ArrowDown 选中前一颗，到头不循环；Home / End 选中首尾。
disabled与readonly都阻止更新，评分照常显示。
技术实现
- 源码：
packages/tuffex/packages/components/src/rating/；导出类型RatingProps、RatingEmits、RatingIcon。
查看源码
packages/tuffex/packages/components/src/rating/index.ts