Rate 评分

用于评分

基础用法

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

Default

Color for different levels

export function RateBasic() {  const [value1, setValue1] = useState(0);  const [value2, setValue2] = useState(0);  return (    <div>      <div style={blockLeft}>        <span style={labelStyle}>Default</span>        <ElRate value={value1} onChange={setValue1} />      </div>      <div style={blockBase}>        <span style={labelStyle}>Color for different levels</span>        <ElRate          value={value2}          onChange={setValue2}          colors={["#99A9BF", "#F7BA2A", "#FF9900"]}        />      </div>    </div>  );}

尺寸

export function RateSizes() {  const [value, setValue] = useState(0);  return (    <>      <ElRate value={value} onChange={setValue} size="large" />      <br />      <ElRate value={value} onChange={setValue} size="default" />      <br />      <ElRate value={value} onChange={setValue} size="small" />    </>  );}

允许半选

属性 allow-half 允许出现半星

辅助文字

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

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

export function RateText() {  const [value, setValue] = useState(0);  return (    <ElRate      value={value}      onChange={setValue}      texts={["oops", "disappointed", "normal", "good", "great"]}      showText    />  );}

可清空

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

只读

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

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

3.7 points

export function RateReadonly() {  const [value] = useState(3.7);  return (    <ElRate      value={value}      disabled      showScore      textColor="#ff9900"      scoreTemplate="{value} points"    />  );}

自定义样式

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

Rate API

Rate Attributes

属性名	说明	类型	默认值
value	当前分值，对应官方 model-value / v-model	`number`	0
max	最大分值	`number`	5
size	尺寸	`enum`	—
disabled	是否只读	`boolean`	false
allow-half	是否允许半选	`boolean`	false
low-threshold	低分与中分的阈值，阈值本身算低分	`number`	2
high-threshold	中分与高分的阈值，阈值本身算高分	`number`	4
colors	图标颜色。数组需 3 个元素；对象以阈值为键	`array` / `object`	['#f7ba2a', '#f7ba2a', '#f7ba2a']
void-color	未选中图标的颜色	`string`	#c6d1de
disabled-void-color	只读时未选中图标的颜色	`string`	#eff2f7
icons	图标，形态同 colors	`array` / `object`	[StarFilled, StarFilled, StarFilled]
void-icon	未选中时的图标	`Component` / `ReactNode`	Star
disabled-void-icon	只读时未选中图标	`Component` / `ReactNode`	StarFilled
show-text	是否显示辅助文字	`boolean`	false
show-score	是否显示当前分值，与 show-text 互斥	`boolean`	false
text-color	辅助文字颜色	`string`	''
texts	辅助文字数组	`array`	['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise']
score-template	分值模板，必须含 `{value}`	`string`	{value}
clearable	再次点击相同值是否清空为 0	`boolean`	false
id	原生 `id`	`string`	—
aria-label	原生 `aria-label`	`string`	rating
class-name / style	根元素类名与样式	`string` / `object`	—

Rate Events

事件名	说明	参数
onChange	分值变化时触发	`Function`

Rate Exposes

名称	说明	类型
setCurrentValue	设置当前高亮值，不回写 value	`Function`
resetCurrentValue	重置高亮为 value 对应值，不回写 value	`Function`

CSS 变量

变量	默认值
--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)