Rate 评分

用于评分

基础用法

评分默认被分为三个等级,可以利用颜色数组对分数及情感倾向进行分级(默认情况下不区分颜色)。 三个等级所对应的颜色用 colors 属性设置,而它们对应的两个阈值则通过 low-thresholdhigh-threshold 设定。

Default
Color for different levels

尺寸



允许半选

属性 allow-half 允许出现半星

辅助文字

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

为组件设置 show-text 属性会在右侧显示辅助文字。 通过设置 texts 可以为每一个分值指定对应的辅助文字。 texts 为一个数组,长度应等于最大值 max

可清空

当你再次点击相同的值时,可以将值重置为 0

更多种类的图标

当有多层评价时,可以用不同类型的图标区分评分层级。

设置icons属性可以自定义不同分段的图标。 若传入数组,共有 3 个元素,为 3 个分段所对应的类名;若传入对象,可自定义分段,键名为分段的界限值,键值为对应的类名。 本例还使用 void-icon 指定了未选中时的图标类名。

只读

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

为组件设置 disabled 属性表示组件为只读。 此时若设置 show-score,则会在右侧显示目前的分值。 此外,您可以使用属性 score-template 来提供评分模板。 模板为一个包含了 {value} 的字符串,{value} 会被替换为当前分值。

3.7 points

自定义样式

您可以为 rate 组件设定自定义样式。 使用 cssscss 改变全局或局部的颜色。 我们设置了一些全局颜色变量:--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-colorvar(--el-border-color-darker)
--el-rate-fill-color#f7ba2a
--el-rate-disabled-void-colorvar(--el-fill-color)
--el-rate-text-colorvar(--el-text-color-primary)

API

Attributes

属性名说明类型默认值
model-value / v-model选中项绑定值number0
max最大分值number5
size尺寸enum
disabled是否为只读booleanfalse
allow-half是否允许半选booleanfalse
low-threshold低分和中等分数的界限值, 值本身被划分在低分中number2
high-threshold高分和中等分数的界限值, 值本身被划分在高分中number4
colorsicon 的颜色。 若传入数组,共有 3 个元素,为 3 个分段所对应的颜色;若传入对象,可自定义分段,键名为分段的界限值,键值为对应的颜色object['#f7ba2a', '#f7ba2a', '#f7ba2a']
void-color未选中 icon 的颜色string#c6d1de
disabled-void-color只读时未选中 icon 的颜色string#eff2f7
icons图标组件 若传入数组,则需要传入 3 个元素,分别为 3 个部分所对应的类名;若传入对象,则可自定义分段,键名为分段的界限值,键值为对应的类名object[StarFilled, StarFilled, StarFilled]
void-icon未被选中的图标组件string / ComponentStar
disabled-void-icon禁用状态的未选择图标string / ComponentStarFilled
show-text是否显示辅助文字,若为真,则会从 texts 数组中选取当前分数对应的文字内容booleanfalse
show-score是否显示当前分数, show-score 和 show-text 不能同时为真booleanfalse
text-color辅助文字的颜色string''
texts辅助文字数组array['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise']
score-template分数显示模板string
clearable 2.2.18是否可以重置值为 0booleanfalse
id原生 id 属性string
aria-label a11y 2.7.2和 Rate 的 aria-label 属性保持一致string
label a11y deprecated和 Rate 的 aria-label 属性保持一致string

Events

事件名描述说明类型
change分值改变时触发Function

Exposes

名称描述类型
setCurrentValue设置当前值Function
resetCurrentValue重置当前值Function

源代码

组件样式文档

贡献者