Rate 评分

用于对事物进行评级操作。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 v-model 绑定当前评分值。

<zq-rate v-model="value" />

const value = ref(3)

自定义图标

通过 icon 和 active-icon 属性自定义未选中和选中时的图标。

<zq-rate v-model="value" icon="heart" active-icon="heart" />

自定义颜色

通过 active-color 和 void-color 属性自定义选中和未选中时的颜色。

<zq-rate v-model="value" active-color="#ee0a24" void-color="#dcdee0" />

自定义数量

通过 count 属性设置评分总数。

<zq-rate v-model="value" :count="8" />

自定义大小

通过 size 属性设置图标大小。

<zq-rate v-model="value" :size="32" />

自定义间距

通过 gutter 属性设置图标间距，单位 rpx。

<zq-rate v-model="value" :gutter="16" />

禁用状态

通过 disabled 属性禁用评分。

<zq-rate v-model="value" disabled />

只读状态

通过 readonly 属性设置为只读，只读时不可交互。

<zq-rate v-model="value" readonly />

API

Props

参数	说明	类型	默认值
v-model	当前评分	number	0
count	图标总数	number	5
size	图标大小	number	22
gutter	图标间距，单位 rpx	number	8
icon	未选中时的图标名称	string	'star'
active-icon	选中时的图标名称	string	'star'
active-color	选中时的颜色	string	'#fbbf24'
void-color	未选中时的颜色	string	''（默认使用 --color-border）
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
allow-half	是否允许半选（预留）	boolean	false

Events

事件名	说明	回调参数
update:modelValue	评分变化时触发	value: number
change	评分变化时触发	value: number

注意事项

• 点击已选中的星标会取消选中（值变为 0）。
• disabled 和 readonly 状态下不可交互，视觉上会有透明度降低效果。

主题定制

变量名	说明
--color-border	未选中时默认颜色