Rate

Used for rating

Basic usage

With allow-half

With text

Using text to indicate rating score

More icons

You can use different icons to distinguish different rate components.

Read-only

Read-only Rate is for displaying rating score. Half star is supported.

Attributes

AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valuenumber0
maxmax rating scorenumber5
disabledwhether Rate is read-onlybooleanfalse
allow-halfwhether picking half start is allowedbooleanfalse
low-thresholdthreshold value between low and medium level. The value itself will be included in low levelnumber2
high-thresholdthreshold value between medium and high level. The value itself will be included in high levelnumber4
colorscolors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding colorarray/object['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-colorcolor of unselected iconsstring#C6D1DE
disabled-void-colorcolor of unselected read-only iconsstring#EFF2F7
icon-classesclass names of icons. If array, ot should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding icon classarray/object['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
void-icon-classclass name of unselected iconsstringel-icon-star-off
disabled-void-icon-classclass name of unselected read-only iconsstringel-icon-star-on
show-textwhether to display textsbooleanfalse
show-scorewhether to display current score. show-score and show-text cannot be true at the same timebooleanfalse
text-colorcolor of textsstring#1F2D3D
textstext arrayarray['Extremely bad','Disappointed','Fair','Satisfied','Surprise']
score-templatescore templatestring{value}

Events

Event NameDescriptionParameters
changeTriggers when rate value is changedvalue after changing