ChuFix UI v0.11.0
开发预览 更新于 2026-05-10

Rating 评分

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

基础用法

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

背景 视口
已选：3 / 5
src/App.vue 
<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>
import { useState } from 'react';
import { CfRating } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState(3);
  const [value, setValue] = useState(3);
  return (
    <>
      <CfRating value={value} onChange={setValue} />
    </>
  );
}
import { useState } from 'react';
import { CfRating } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState(3);
  const [value, setValue] = useState(3);
  return (
    <>
      <CfRating value={value} onChange={setValue} />
    </>
  );
}

半星精度

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

背景 视口
3.5 / 5
src/App.vue 
<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>
import { useState } from 'react';
import { CfRating } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState(3.5);
  const [value, setValue] = useState(3.5);
  return (
    <>
      <CfRating value={value} onChange={setValue} allowHalf showValue />
    </>
  );
}
import { useState } from 'react';
import { CfRating } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState(3.5);
  const [value, setValue] = useState(3.5);
  return (
    <>
      <CfRating value={value} onChange={setValue} allowHalf showValue />
    </>
  );
}

只读 / 禁用

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

背景 视口
readonly · 显示评分但不可改
4 / 5
disabled · 灰显且不响应
src/App.vue 
<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>
import { CfRating } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfRating value={4} readonly showValue />
      <CfRating value={2} disabled />
    </>
  );
}
import { CfRating } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfRating value={4} readonly showValue />
      <CfRating value={2} disabled />
    </>
  );
}

三档尺寸

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

背景 视口
3 / 5
3 / 5
3 / 5
src/App.vue 
<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>
import { useState } from 'react';
import { CfRating } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(3);
  const [a, setA] = useState(3);
  const [b, setB] = useState(3);
  const [b, setB] = useState(3);
  const [c, setC] = useState(3);
  const [c, setC] = useState(3);
  return (
    <>
      <CfRating value={a} onChange={setA} size="sm" showValue />
      <CfRating value={b} onChange={setB} size="md" showValue />
      <CfRating value={c} onChange={setC} size="lg" showValue />
    </>
  );
}
import { useState } from 'react';
import { CfRating } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(3);
  const [a, setA] = useState(3);
  const [b, setB] = useState(3);
  const [b, setB] = useState(3);
  const [c, setC] = useState(3);
  const [c, setC] = useState(3);
  return (
    <>
      <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

Props

属性类型默认值说明
modelValue (Vue) / value (React)number0当前分值
countnumber5星星总数
allowHalfbooleanfalse启用半星精度
readonlybooleanfalse只读
disabledbooleanfalse禁用
size'sm' | 'md' | 'lg''md'尺寸
showValuebooleanfalse在尾部显示 value / count

Events

Vue 事件React 回调载荷类型说明
update:modelValueonChangenumber评分变化时触发；allowHalf=true 时载荷可能是 0.5 / 1 / 1.5 ...
changeonChangenumber与 update:modelValue 同步触发，载荷相同

反馈与讨论

Rating 评分 的讨论

0
0 / 600
正在加载评论...