Rate 评分
用于对事物进行评分操作。
基础用法
评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级。
默认:
自定义颜色:
基础用法
不同尺寸
使用 size 属性来设置评分组件的尺寸。
不同尺寸
允许半选
设置 allow-half 属性允许选择半星。
允许半选
辅助文字
设置 show-text 属性显示辅助文字，或者 show-score 显示分数。
一般
3.7 分
辅助文字
可清空
使用 clearable 属性，当再次点击相同的值时，可以将值重置为 0。
可清空
只读
设置 disabled 属性开启只读模式，常用于展示分数。
3.7
只读
自定义图标
通过 icon 插槽可以自定义图标。
自定义图标
在 Nuxt 中使用
Rate 组件完全支持 Nuxt 3/4 的 SSR 渲染。在 Nuxt 项目中使用时，组件会自动导入。
平均得分:
4.5
Nuxt 中使用
SSR 注意事项：
- ✅ 星级显示、半星（allow-half）完全支持
- ✅ 自定义文本及分数显示在 SSR 中渲染准确
- ✅ 颜色配置（colors 数组）支持服务器端计算
- ✅ 样式在不同尺寸下保持一致
SSR 安全性
Rate 组件在服务端渲染时会静态生成对应的星星位图/SVG 路径，确保用户在 JS 加载前就能看到完整的评分状态。
API
Rate Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model / model-value | 绑定值 | number | 0 |
| max | 最大分值 | number | 5 |
| disabled | 是否为只读 | boolean | false |
| allow-half | 是否允许半选 | boolean | false |
| clearable | 是否可以通过点击当前值来重置 | boolean | false |
| show-text | 是否显示辅助文字，会覆盖 score | boolean | false |
| show-score | 是否显示当前分数，show-text 为 false 时有效 | boolean | false |
| text-color | 辅助文字颜色 | string | '#1f2d3d' |
| texts | 辅助文字数组 | string[] | ['极差', '失望', '一般', '满意', '惊喜'] |
| colors | 评分激活颜色，支持字符串或颜色数组（分别对应 2分及以下，4分及以下，5分） | string | string[] | '#F7BA2A' |
| void-color | 未选中状态颜色 | string | '#C6D1DE' |
| disabled-void-color | 禁用状态下未选中颜色 | string | '#EFF2F7' |
| size | 评分图标的大小 | 'large' | 'default' | 'small' | 'default' |
| score-template | 分数显示模板 | string | '{value}' |
Rate Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 分值改变时触发 | (value: number) => void |
Rate Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| icon | 自定义图标 | { index: number, width: string, activeColor: string, voidColor: string } |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-rate-void-color | 未选中状态颜色 | #c6d1de |
--yh-rate-fill-color | 选中状态颜色 | #f7ba2a |
--yh-rate-disabled-void-color | 禁用状态下未选中颜色 | #eff2f7 |
--yh-rate-text-color | 辅助文字颜色 | #1f2d3d |
--yh-rate-font-size | 辅助文字大小 | 14px |
--yh-rate-icon-margin | 图标间距 | 6px |