Rate 评分

评分用于收集用户对内容的评价，支持自定义星星总数、尺寸、图标与间距，可设置类型配色与空星颜色，并支持半星选择、只读与禁用。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-rate 的用法，可按需组合。

<template>
  <mu-rate v-model="base"></mu-rate>
</template>

类型

设置点亮星星的颜色，可选内置语义色。

<mu-rate v-model="tPrimary" type="primary"></mu-rate>
<mu-rate v-model="tSuccess" type="success"></mu-rate>
<mu-rate v-model="tWarning" type="warning"></mu-rate>
<mu-rate v-model="tError" type="error"></mu-rate>
<mu-rate v-model="tDefault" type="default"></mu-rate>

自定义颜色

type 传入内置语义色以外的值时，会作为颜色值使用。

<mu-rate v-model="tCustom" type="#8B5CF6"></mu-rate>

尺寸

设置单个星星的尺寸，可传数值或带单位的字符串。

<mu-rate v-model="s1" size="32rpx"></mu-rate>
<mu-rate v-model="s2" size="44rpx"></mu-rate>
<mu-rate v-model="s3" size="64rpx"></mu-rate>

图标

设置星星使用的图标名称，取值为图标列表中的名称。

<mu-rate v-model="i1" icon="star1" type="error"></mu-rate>
<mu-rate v-model="i2" icon="like" type="primary"></mu-rate>

半星

开启后允许选择半颗星。

<mu-rate v-model="half" :allow-half="true"></mu-rate>

数量

设置星星的总数。

<mu-rate v-model="c1" :count="3"></mu-rate>

间距

设置星星之间的间距，单位为 rpx。

<mu-rate v-model="c2" :count="10" gap="12rpx" size="36rpx"></mu-rate>

空星颜色

设置未点亮星星的颜色，可使用主题变量或任意合法颜色。

<mu-rate v-model="emptyVal" type="primary" empty-color="var(--mu-color-info)"></mu-rate>

只读

开启后星星仅作展示，不可修改评分。

<mu-rate v-model="readonlyVal" :readonly="true"></mu-rate>

禁用

开启后组件置为禁用状态，不可交互。

<mu-rate v-model="disabledVal" :disabled="true" type="success"></mu-rate>

事件

选择评分时触发 change 事件，回调参数为新的评分值。

<mu-rate v-model="emptyVal" type="primary" @change="onRateChange"></mu-rate>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
v-model	绑定值（当前评分）	number	0
count	星星总数	number	5
type	点亮星星的颜色，可选 primary、success、warning、error、danger、info、default，也可直接传入颜色值	string	warning
size	单个星星尺寸	string | number	44rpx
icon	图标名称	string	star
gap	星星间距	string	8rpx
emptyColor	空星颜色	string	var(--mu-rate-empty-color, var(--mu-color-default, #E4E6EB))
allowHalf	是否允许半星选择	boolean	false
readonly	是否只读	boolean	false
disabled	是否禁用	boolean	false
customClass	自定义类名，附加在评分根节点上以覆盖默认样式	string	-
customStyle	自定义行内样式，直接作用于评分根节点	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
change	选择评分时触发	value: number

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：通过 v-model 绑定评分（number），选择后触发 change，回调参数为新的评分值。
• 使用注意：readonly 或 disabled 任一为真即不可交互，无法修改评分。
• 使用注意：allowHalf 为 true 时点击星星左半区得到 index + 0.5，右半区得到 index + 1。