Rate 评分

用于评分

基础用法

尺寸

允许半选

辅助文字

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

其它 icon

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

只读

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

自定义样式

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

Rate 事件

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

源代码

组件文档

贡献者