Rate 评分

用于评分

基本用法

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

尺寸

通过设置 size 属性，来展示不同大小。可选值：large、default、small。默认 default。

半选

属性 allow-half 允许出现半星

辅助文字

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

可清空

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

自定义图标

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

只读

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

API

Attributes

参数	说明	类型	默认值
model-value / v-model	绑定值	`number`	0
max	最大分值	`number`	5
size	尺寸	`'large' \| 'default' \| 'small'`	—
disabled	是否禁用	`boolean`	false
allow-half	是否半选	`boolean`	false
low-threshold	低分和中等分数的界限值，值本身被划分在低分中	`number`	2
high-threshold	高分和中等分数的界限值，值本身被划分在高分中	`number`	4
colors	icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色	`string[] \| Record<number, string>`	['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color	未选中 icon 的颜色	`string`	#C6D1DE
disabled-void-color	只读时未选中 icon 的颜色	`string`	#EFF2F7
icons	图标组件若传入数组，则需要传入 3 个元素，分别为 3 个部分所对应的类名；若传入对象，则可自定义分段，键名为分段的界限值，键值为对应的类名	`string[] \| Component[] \| Record<number, string \| Component>`	[StarFilled, StarFilled, StarFilled]
void-icon	未被选中的图标组件	`IconSlotType`	Star
disabled-void-icon	禁用状态的未选择图标	`IconSlotType`	StarFilled
show-text	是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容	`boolean`	false
show-score	是否显示当前分数， show-score 和 show-text 不能同时为真	`boolean`	false
text-color	辅助文字的颜色	`string`	''
texts	辅助文字数组	`string[]`	['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise']
score-template	分数显示模板	`string`
clearable	是否可以重置值为 0	`boolean`	false
id	原生属性 `id`	`string`	—
label	原生属性 `aria-label`	`string`	—

Events

事件名称	说明	类型
change	分值改变时触发	`(value: number) => void`

Exposes

名称	说明	类型
setCurrentValue	设置当前值	`(value: number) => void`
resetCurrentValue	重置当前值	`() => void`

Rate 评分 ​

基本用法 ​

尺寸 ​

半选 ​

辅助文字 ​

可清空 ​

自定义图标 ​

只读 ​

API ​

Attributes ​

Events ​

Exposes ​