Rate 评分
基于 BrConfigProvider 实现全局主题配置,支持半星、自定义图标、只读态的企业级评分组件,可无缝集成 BrFormItem。
基础用法
最基础的评分组件用法。
Example
半星评分
支持半星评分,通过 allow-half 属性开启。
Example
自定义图标与数量
可以自定义图标以及评分的最大数量。
Example
只读与禁用状态
Read-only State (Readonly)
Disabled State (Disabled)
Example
主题定制
BrRate 可以无缝接入 BrFormItem,并支持通过 BrConfigProvider 进行主题全局配置。
Example
API
BrRate Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue / v-model | number | 0 | 当前评分值 |
| count | number | 5 | 图标总数 |
| allowHalf | boolean | false | 是否允许半星评分 |
| readonly | boolean | false | 是否为只读状态 |
| disabled | boolean | false | 是否为禁用状态 |
| clearable | boolean | false | 是否允许再次点击后清除 |
| size | ComponentSize | number | 'default' | 评分图标大小 |
| color | string | string[] | Record<number, string> | - | 激活时的颜色,支持颜色数组或分段颜色对象 |
| voidColor | string | - | 未激活时的颜色 |
| icon | Component | string | Star | 激活时的图标组件 |
| voidIcon | Component | string | Star | 未激活时的图标组件 |
| halfIcon | Component | string | - | 半星时的图标组件(如不传则通过裁剪 icon 实现) |
| showText | boolean | false | 是否显示辅助文字 |
| texts | string[] | [] | 辅助文字数组 |
| validationState | 'default' | 'success' | 'error' | 'warning' | 'default' | 校验状态,集成 BrFormItem 时自动同步 |
BrRate Emits
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:modelValue | 评分值改变时触发 | (value: number) |
| change | 评分值改变时触发 | (value: number) |
| hoverChange | 鼠标悬浮评分值改变时触发 | (value: number) |
BrRateItem Props (内部项组件)
通常无需直接使用,暴露以供深度定制。
| 属性名 | 类型 | 说明 |
|---|---|---|
| value | number | 当前项的值 |
| activeValue | number | 当前激活的总值 |
| hoverValue | number | 当前悬浮的总值 |
| allowHalf | boolean | 是否允许半星 |
| readonly | boolean | 是否只读 |
| disabled | boolean | 是否禁用 |
| size | ComponentSize | number | 图标大小 |
| color | string | 激活颜色 |
| voidColor | string | 未激活颜色 |
| icon | Component | string | 激活图标 |
| voidIcon | Component | string | 未激活图标 |
| halfIcon | Component | string | 半星图标 |