Rate 评分

用于评分交互,支持半星、自定义图标、颜色、提示文字等多种配置。

基础用法
通过 v-model 绑定评分值:
3 星
半星
设置 allow-half 允许选择半星:
3.5 星
自定义数量
通过 count 设置星星总数:
7 星
自定义颜色
通过 color 设置选中颜色:
不同尺寸
设置 size 为 sm / md / lg:
显示文字
设置 show-text 在评分旁边显示文字描述:
一般
自定义图标
通过 icon 属性或 icon 插槽自定义图标:
提示信息
通过 tooltips 鼠标悬停时显示提示文字:
可清除
设置 clearable 再次点击同一评分可清除,或点击 ✕ 按钮清除:
3 星
禁用状态
设置 disabled 禁用评分:

Props

参数类型默认值说明
modelValuenumber-当前评分值(v-model),必填
countnumber5星星总数
allowHalfbooleanfalse是否允许半星
showTextbooleanfalse是否显示文字描述
disabledbooleanfalse是否禁用
size'sm' | 'md' | 'lg''md'尺寸
colorstring-选中颜色(CSS 颜色值)
iconstring'★'自定义图标字符
clearablebooleanfalse是否可清除(再次点击同一评分清零)
tooltipsstring[]-鼠标悬停提示文字数组
textsRecord<number, string>-评分文字描述映射

Events

事件名类型说明
update:modelValue(val: number) => void评分变化时触发
change(val: number) => void评分变化时触发

Slots

插槽名说明
icon自定义图标,参数 { index, active }