Rate 评分

评分组件

基础用法

辅助文字

用辅助文字直接地表达对应分数。

其他 Icon

当有多层评价时，可以用不同类型的 Icon 区分评分层级。

允许半选

评分组件支持半选模式，通过设置 allow-half 属性开启。

只读

只读的评分用来展示分数，允许出现半星。

✨ 心情模式 (Unique)

开启 mood 属性，评分图标将根据分数自动变化为心情图标（难过 -> 开心）。

🅰️ 字符模式 (Unique)

使用 character 属性，可以将图标替换为任意字符（如字母、汉字、数字等），适用于特殊的评分场景（如等级评定）。

🏃 动态效果 (Unique)

开启 animate 属性，鼠标悬停或选中时会有跳动动画，增加交互趣味性。

API

Rate 属性

属性名	说明	类型	默认值
model-value / v-model	绑定值	`number`	`0`
max	最大分值	`number`	`5`
disabled	是否为只读	`boolean`	`false`
allow-half	是否允许半选	`boolean`	`false`
low-threshold	低分和中等分数的界限值，值本身被划分在低分中	`number`	`2`
high-threshold	高分和中等分数的界限值，值本身被划分在高分中	`number`	`4`
colors	icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色	`string[]` / `object`	`['#F7BA2A', '#F7BA2A', '#F7BA2A']`
void-color	未选中 icon 的颜色	`string`	`#C6D1DE`
disabled-void-color	只读时未选中 icon 的颜色	`string`	`#EFF2F7`
icons	icon 的组件。若传入数组，共有 3 个元素，为 3 个分段所对应的 icon；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的 icon	`string[]` / `Component[]` / `object`	`[Star, Star, Star]`
void-icon	未选中 icon 的组件	`string` / `Component`	`Star`
disabled-void-icon	只读时未选中 icon 的组件	`string` / `Component`	`Star`
show-text	是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容	`boolean`	`false`
show-score	是否显示当前分数，show-score 和 show-text 不能同时为真	`boolean`	`false`
text-color	辅助文字的颜色	`string`	`#1f2d3d`
texts	辅助文字数组	`string[]`	`['极差', '失望', '一般', '满意', '惊喜']`
score-template	分数显示模板	`string`	`{value}`
size	图标大小，支持 CSS 单位	`number` / `string`	—
clearable	是否允许再次点击后清除	`boolean`	`false`
mood	是否开启心情模式	`boolean`	`false`
character	自定义字符模式	`string`	—
animate	是否开启交互动画	`boolean`	`false`

Rate 事件

事件名	说明	回调参数
change	分值改变时触发	`value: number`

Rate 评分 ​

基础用法 ​

辅助文字 ​

其他 Icon ​

允许半选 ​

只读 ​

✨ 心情模式 (Unique) ​

🅰️ 字符模式 (Unique) ​

🏃 动态效果 (Unique) ​

API ​

Rate 属性 ​

Rate 事件 ​