Rate 评分

17:06

说明

评分组件，支持点击与滑动评分，可配置星星数量、尺寸、间距与选中 / 未选中颜色，并支持 allow-half 半星与 colors / icons 按评分区间分段着色。通过 v-model（model-value 默认 -1 作哨兵）双向绑定选中的星数，change 回传当前分值。

兼容性

平台	支持情况
App	✅ 支持
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

点击星星即可评分，点击第一颗星可取消清零。

查看源码

<template>
    <ux-rate :model-value="value" @change="onChange" />
</template>

<script setup lang="uts">
const value = ref<number>(0);

const onChange = (val: number) => {
    value.value = val;
};
</script>

自定义数量与尺寸

通过 count 设置星星数量，size 设置星星大小。

查看源码

<template>
    <ux-rate :count="8" :current="5" :size="22" />
</template>

自定义颜色

通过 active-color / inactive-color 自定义选中与未选中颜色。

查看源码

<template>
    <ux-rate :current="3" active-color="#ff9900" inactive-color="#c8c9cc" />
</template>

半星 allow-half

allow-half=true 时点星星左半选择半星（0.5）、点右半选择整星；点第一颗星的半星或整星可取消清零。

查看源码

<template>
    <ux-rate :model-value="value" allow-half active-color="#fa3534" @change="onChange" />
</template>

<script setup lang="uts">
const value = ref<number>(3.5);

const onChange = (val: number) => {
    value.value = val;
};
</script>

禁用状态 disabled

disabled=true 时不可交互，仅展示评分结果。

查看源码

<template>
    <ux-rate :current="4" disabled />
</template>

分段颜色 colors

通过 colors 数组按评分区间分段显示不同颜色。

查看源码

<template>
    <ux-rate :model-value="value" :colors="colors" @change="onChange" />
</template>

<script setup lang="uts">
const value = ref<number>(3);
const colors: string[] = ['#2979ff', '#ff9900', '#fa3534'];

const onChange = (val: number) => {
    value.value = val;
};
</script>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
modelValue	v-model双向绑定选中的星星数量	number | string	-1	-
count	要显示的星星数量	number | string	5	-
current	当前需要默认选中的星星	number | string	0	-
disabled	是否不可选中	boolean	false	-
size	星星的大小	number | string	16	-
inactiveColor	未选中时的颜色	string	''	-
activeColor	选中的颜色	string	''	-
gutter	星星之间间距	number | string	5	-
minCount	最少选中星星个数	number | string	0	-
allowHalf	是否允许半星	boolean	false	-
activeIcon	选中时的图标	string	'star-fill'	-
inactiveIcon	未选中时的图标	string	'star'	-
customPrefix	自定义扩展前缀	string	'uicon'	-
colors	分段颜色	string[]	-	-
icons	分段图标	string[]	-	-

Events

事件名	说明	回调参数	版本
change	选中的星星发生变化时触发	value: number	-

Slots

ux-rate 无插槽。

注意事项

1. model-value 默认 -1 作哨兵：传入非 -1 的值（或用 v-model）才双向绑定，并在 change 时同步 update:modelValue；仅传 current 时组件不回写。
2. allow-half 时，点星星左半记 0.5、右半记整星；点第一颗星的整星（当前已是 1）或半星（当前已是 0.5）会清零，用于取消评分。
3. 支持点击与滑动评分（touchmove）；滑动评分按实测单星宽换算，半星判定依赖首次布局测量，容器宽度变化后需重新测量。
4. min-count 限制最小可评分；count 决定星星数量；disabled 时不响应点击与滑动。
5. colors / icons 仅在数组长度不大于 count 时生效，按评分区间分段取色 / 取图标；不满足时回退 active-color / active-icon。
6. 星星图标来自 ux-icon，可用 active-icon / inactive-icon 替换图标名。
7. 放在 ux-form-item 内时，评分变化会触发表单校验；占位 -1（未评分）不触发。