开发预览更新于 2026-05-10

Rating 评分

星级评分控件，整数 / 半星精度、可只读、可禁用，支持显示数值。

基础用法

最简形态 —— 5 颗整数星，鼠标悬停预览，点击确定。

已选：3 / 5

<CfRating v-model="value" />

<CfRating value={value} onChange={setValue} />

半星精度

allowHalf 启用半星 —— 鼠标悬停在每颗星左半边时返回 i + 0.5，右半边返回 i + 1。常用于 0.5 分粒度的评价场景。

3.5 / 5

<CfRating v-model="value" allow-half show-value />

<CfRating value={value} onChange={setValue} allowHalf showValue />

只读 / 禁用

readonly 锁定值但保留视觉（用于展示已有评价）；disabled 灰显且禁用所有交互。

readonly · 显示评分但不可改

4 / 5

disabled · 灰显且不响应

<CfRating :model-value="4" readonly show-value />
<CfRating :model-value="2" disabled />

<CfRating value={4} readonly showValue />
<CfRating value={2} disabled />

三档尺寸

size 控制单颗星的直径 — sm / md（默认）/ lg。showValue 在末尾追加 value / count。

3 / 5

<CfRating v-model="a" size="sm" show-value />
<CfRating v-model="b" size="md" show-value />
<CfRating v-model="c" size="lg" show-value />

<CfRating value={a} onChange={setA} size="sm" showValue />
<CfRating value={b} onChange={setB} size="md" showValue />
<CfRating value={c} onChange={setC} size="lg" showValue />

API

属性	类型	默认值	说明
`modelValue` (Vue) / `value` (React)	`number`	`0`	当前分值
`count`	`number`	`5`	星星总数
`allowHalf`	`boolean`	`false`	启用半星精度
`readonly`	`boolean`	`false`	只读
`disabled`	`boolean`	`false`	禁用
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`showValue`	`boolean`	`false`	在尾部显示 `value / count`