Rate 评分

用于评分

基础用法

尺寸

允许半选

辅助文字

用辅助文字直接为你打的分数做评判

可清空

只读

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

自定义样式

现在你可以为评分组件设置自定义样式了。使用 css/scss 语言来改变全局或局部的颜色。我们设置了一些全局颜色变量：--el-rate-void-color，--el-rate-fill-color，--el-rate-disabled-void-color，--el-rate-text-color。你可以像这样使用：:root { --el-rate-void-color: red; --el-rate-fill-color: blue; }.

默认变量

变量	默认颜色
--el-rate-void-color	var(--el-border-color-darker)
--el-rate-fill-color	#f7ba2a
--el-rate-disabled-void-color	var(--el-fill-color)
--el-rate-text-color	var(--el-text-color-primary)

API

属性

名称	描述	类型	默认值
model-value / v-model	绑定值	`number`	0
max	最大分值	`number`	5
size	Rate 组件的尺寸	`枚举`	—
disabled	是否为只读	`boolean`	false
allow-half	是否允许半选	`boolean`	false
low-threshold	低分和中等分数的界限值，值本身被划分在低分中	`number`	2
high-threshold	高分和中等分数的界限值，值本身被划分在高分中	`number`	4
colors	icon 的颜色。如果传入数组，共有 3 个元素，为 3 个分段所对应的颜色；如果传入对象，key 为分段的界限值，value 为对应的颜色	`object`	['#f7ba2a', '#f7ba2a', '#f7ba2a']
void-color	未选中 icon 的颜色	`string`	#c6d1de
disabled-void-color	只读时未选中 icon 的颜色	`string`	#eff2f7
icons	icon 组件。如果传入数组，共有 3 个元素，为 3 个分段所对应的类名；如果传入对象，key 为分段的界限值，value 为对应的 icon 组件	`object`	[StarFilled, StarFilled, StarFilled]
void-icon	未选中 icon 的组件	`string` / `Component`	Star
disabled-void-icon	只读时未选中 icon 的组件	`string` / `Component`	StarFilled
show-text	是否显示辅助文字	`boolean`	false
show-score	是否显示当前分数。 show-score 和 show-text 不能同时为真	`boolean`	false
text-color	辅助文字的颜色	`string`	''
texts	辅助文字数组	`array`	['极差', '失望', '一般', '满意', '惊喜']
score-template	分数显示模板	`string`
clearable 2.2.18	是否可以重置值为 `0`	`boolean`	false
id	原生 `id` 属性	`string`	—
aria-label a11y 2.7.2	原生 `aria-label` 属性	`string`	—
label a11y 已废弃	原生 `aria-label` 属性	`string`	—