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

Rating 评分

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

基础用法

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

背景

已选：3 / 5

<script setup lang="ts">
import { ref } from 'vue';
import { CfRating } from '@chufix-design/vue';

const value = ref(3);
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 8px; align-items: flex-start;">
    <CfRating v-model="value" />
    <span style="font-size: 12px; color: var(--fg-3);">已选：<code>{{ value }}</code> / 5</span>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfRating } from '@chufix-design/vue';

const value = ref(3);
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 8px; align-items: flex-start;">
    <CfRating v-model="value" />
    <span style="font-size: 12px; color: var(--fg-3);">已选：<code>{{ value }}</code> / 5</span>
  </div>
</template>

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

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

半星精度

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

背景

3.5 / 5

<script setup lang="ts">
import { ref } from 'vue';
import { CfRating } from '@chufix-design/vue';

const value = ref(3.5);
</script>

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

<script setup>
import { ref } from 'vue';
import { CfRating } from '@chufix-design/vue';

const value = ref(3.5);
</script>

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

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

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

只读 / 禁用

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

背景

readonly · 显示评分但不可改

4 / 5

disabled · 灰显且不响应

<script setup lang="ts">
import { CfRating } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">readonly · 显示评分但不可改</div>
      <CfRating :model-value="4" readonly show-value />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">disabled · 灰显且不响应</div>
      <CfRating :model-value="2" disabled />
    </div>
  </div>
</template>

<script setup>
import { CfRating } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">readonly · 显示评分但不可改</div>
      <CfRating :model-value="4" readonly show-value />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">disabled · 灰显且不响应</div>
      <CfRating :model-value="2" disabled />
    </div>
  </div>
</template>

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

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

三档尺寸

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

背景

3 / 5

<script setup lang="ts">
import { ref } from 'vue';
import { CfRating } from '@chufix-design/vue';

const a = ref(3);
const b = ref(3);
const c = ref(3);
</script>

<template>
  <div class="demo-stack">
    <CfRating v-model="a" size="sm" show-value />
    <CfRating v-model="b" size="md" show-value />
    <CfRating v-model="c" size="lg" show-value />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfRating } from '@chufix-design/vue';

const a = ref(3);
const b = ref(3);
const c = ref(3);
</script>

<template>
  <div class="demo-stack">
    <CfRating v-model="a" size="sm" show-value />
    <CfRating v-model="b" size="md" show-value />
    <CfRating v-model="c" size="lg" show-value />
  </div>
</template>

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

<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`