Rate 评分

用于评分

基础用法

尺寸

允许半选

辅助文字

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

可清空

更多种类的图标

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

只读

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

自定义样式

您可以为 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)

Rate 属性

属性名说明类型可选值默认值
model-value / v-model选中项绑定值number0
max最大分值number5
size尺寸stringlarge / default / smalldefault
disabled是否为只读booleanfalse
allow-half是否允许半选booleanfalse
low-threshold低分和中等分数的界限值, 值本身被划分在低分中number2
high-threshold高分和中等分数的界限值, 值本身被划分在高分中number4
colorsicon 的颜色。 若传入数组,共有 3 个元素,为 3 个分段所对应的颜色;若传入对象,可自定义分段,键名为分段的界限值,键值为对应的颜色array/object['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color未选中 icon 的颜色string#C6D1DE
disabled-void-color只读时未选中 icon 的颜色string#EFF2F7
icons图标组件 若传入数组,则需要传入 3 个元素,分别为 3 个部分所对应的类名;若传入对象,则可自定义分段,键名为分段的界限值,键值为对应的类名array/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#1F2D3D
texts辅助文字数组array['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise']
score-template分数显示模板string
clearable是否可以重置值为 0booleanfalse

Rate 事件

事件名描述说明参数
change分值改变时触发val,改变后的值

源代码

组件文档

贡献者