Rate 评分
用于评分交互,支持半星、自定义图标、颜色、提示文字等多种配置。
基础用法
通过 v-model 绑定评分值:
★★★★★
3 星半星
设置 allow-half 允许选择半星:
★★★★★
3.5 星自定义数量
通过 count 设置星星总数:
★★★★★★★★★★
7 星自定义颜色
通过 color 设置选中颜色:
★★★★★
★★★★★
★★★★★
不同尺寸
设置 size 为 sm / md / lg:
★★★★★
★★★★★
★★★★★
显示文字
设置 show-text 在评分旁边显示文字描述:
★★★★★一般
自定义图标
通过 icon 属性或 icon 插槽自定义图标:
♥♥♥♥♥
提示信息
通过 tooltips 鼠标悬停时显示提示文字:
★★★★★
可清除
设置 clearable 再次点击同一评分可清除,或点击 ✕ 按钮清除:
★★★★★✕
3 星禁用状态
设置 disabled 禁用评分:
★★★★★
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | number | - | 当前评分值(v-model),必填 |
count | number | 5 | 星星总数 |
allowHalf | boolean | false | 是否允许半星 |
showText | boolean | false | 是否显示文字描述 |
disabled | boolean | false | 是否禁用 |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸 |
color | string | - | 选中颜色(CSS 颜色值) |
icon | string | '★' | 自定义图标字符 |
clearable | boolean | false | 是否可清除(再次点击同一评分清零) |
tooltips | string[] | - | 鼠标悬停提示文字数组 |
texts | Record<number, string> | - | 评分文字描述映射 |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
update:modelValue | (val: number) => void | 评分变化时触发 |
change | (val: number) => void | 评分变化时触发 |
Slots
| 插槽名 | 说明 |
|---|---|
icon | 自定义图标,参数 { index, active } |