Rate 评分
基于 Lucide Star 矢量星星构建的评分组件。选中的星星拥有高饱和的 HSL themed 金黄色填充、粗黑描边，并且在 hover 时具有弹性的微交互放大和位移反馈。
预览
基础评分
关联外部标签
允许半星
自定义最大值 (10颗星)
只读模式
自定义图腾图标 (icon)
不同的尺寸
安装
pnpm dlx brutx-vue@latest add rate用法
基础用法
<script setup>
import { ref } from 'vue'
import { Rate } from 'brutx-ui-vue'
const value = ref(3)
</script>
<template>
<Rate v-model="value" />
</template>Rate 默认使用当前语言包中的评分名称。可通过 aria-label 自定义名称，也可用 aria-labelledby 关联页面上的可见标签；提供 aria-labelledby 时会优先采用外部标签。
<template>
<span id="product-rating-label">商品评分</span>
<Rate v-model="value" aria-labelledby="product-rating-label" />
</template>允许半星
使用 allow-half 属性可以支持半星评分。
<script setup>
import { ref } from 'vue'
import { Rate } from 'brutx-ui-vue'
const value = ref(3.5)
</script>
<template>
<Rate v-model="value" allow-half />
</template>自定义星星数
通过 max 属性可以调整评分的上限（默认为 5）。
<template>
<Rate v-model="value" :max="10" />
</template>只读模式
添加 readonly 展示已有评分，停止悬停预览、点击选择和键盘修改。
<template>
<Rate v-model="value" readonly allow-half />
</template>尺寸
| 尺寸 | 说明 |
|---|---|
sm | 小图标，紧凑间距 |
md | 默认图标和间距 |
lg | 大图标，宽松间距 |
API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | number | undefined | 0 | 当前评分，通过 v-model 绑定；鼠标悬停时临时预览悬停分值，移出后恢复显示绑定值。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/rate/Rate.vue | |||
max | number | undefined | 5 | 评分上限，同时决定渲染的图标数量和键盘 End 键选中的分值；应传入正整数。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/rate/Rate.vue | |||
allowHalf | boolean | undefined | false | 启用半分选择与半图标填充；鼠标可选择每个图标的左半区，方向键步长也变为半分。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/rate/Rate.vue | |||
readonly | boolean | undefined | false | 仅展示评分，停止鼠标预览、点击选择和键盘修改，并将组件移出 Tab 焦点顺序。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/rate/Rate.vue | |||
size | "lg" | "sm" | "md" | undefined | "md" | 控制评分图标的尺寸和图标之间的间距。 |
详情声明类型"lg" | "sm" | "md" | undefined 字面量
默认值详情
来源packages/ui/src/components/rate/Rate.vue | |||
icon | string | undefined | undefined运行时回退: | 用于评分图标的 BrutalShape 图腾名称，例如 heart、lightning 或 star-5。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/rate/Rate.vue | |||
ariaLabel | string | undefined | undefined | 自定义评分控件的无障碍名称；未提供 aria-labelledby 时使用本属性，两者均未提供时使用当前语言包默认名称。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/rate/Rate.vue | |||
ariaLabelledby | string | undefined | undefined | 关联外部标签元素的 ID；提供时作为评分控件的无障碍名称，并优先于 ariaLabel。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/rate/Rate.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@update:modelValue | [value: number] | 用户通过鼠标或键盘选择了与当前值不同的评分时触发，用于更新 v-model；悬停预览不会触发。 |
详情声明类型[value: number] 来源packages/ui/src/components/rate/Rate.vue | ||
@change | [value: number] | 用户选中的评分发生变化时，在 update:modelValue 之后触发，参数为相同的新评分。 |
详情声明类型[value: number] 来源packages/ui/src/components/rate/Rate.vue | ||
可访问性
- 键盘操作：方向右键或上键增加评分，左键或下键减少评分；
Home归零，End选取最高分。启用allowHalf时方向键按半分调整；只读时停止键盘修改并移出 Tab 焦点顺序 - ARIA 属性：组件根元素设置了
role="slider"角色，同时声明aria-valuenow对应当前评分值，aria-valuemin="0"，aria-valuemax对应max，且有aria-readonly属性标记只读状态 - 无障碍名称：默认名称来自当前语言包；
aria-labelledby关联外部可见标签并优先于aria-label，未关联外部标签时可用aria-label自定义名称 - 动效降级：敲选图标后的敲印回弹会读取
prefers-reduced-motion，开启“减弱动态效果”时不播放该动画