Skip to content

Rate 评分

基于 BrConfigProvider 实现全局主题配置,支持半星、自定义图标、只读态的企业级评分组件,可无缝集成 BrFormItem。

基础用法

最基础的评分组件用法。

Example

半星评分

支持半星评分,通过 allow-half 属性开启。

Example

自定义图标与数量

可以自定义图标以及评分的最大数量。

Example

只读与禁用状态

Read-only State (Readonly)
Disabled State (Disabled)
Example

主题定制

BrRate 可以无缝接入 BrFormItem,并支持通过 BrConfigProvider 进行主题全局配置。

Terrible
Example

API

BrRate Props

属性名类型默认值说明
modelValue / v-modelnumber0当前评分值
countnumber5图标总数
allowHalfbooleanfalse是否允许半星评分
readonlybooleanfalse是否为只读状态
disabledbooleanfalse是否为禁用状态
clearablebooleanfalse是否允许再次点击后清除
sizeComponentSize | number'default'评分图标大小
colorstring | string[] | Record<number, string>-激活时的颜色,支持颜色数组或分段颜色对象
voidColorstring-未激活时的颜色
iconComponent | stringStar激活时的图标组件
voidIconComponent | stringStar未激活时的图标组件
halfIconComponent | string-半星时的图标组件(如不传则通过裁剪 icon 实现)
showTextbooleanfalse是否显示辅助文字
textsstring[][]辅助文字数组
validationState'default' | 'success' | 'error' | 'warning''default'校验状态,集成 BrFormItem 时自动同步

BrRate Emits

事件名说明回调参数
update:modelValue评分值改变时触发(value: number)
change评分值改变时触发(value: number)
hoverChange鼠标悬浮评分值改变时触发(value: number)

BrRateItem Props (内部项组件)

通常无需直接使用,暴露以供深度定制。

属性名类型说明
valuenumber当前项的值
activeValuenumber当前激活的总值
hoverValuenumber当前悬浮的总值
allowHalfboolean是否允许半星
readonlyboolean是否只读
disabledboolean是否禁用
sizeComponentSize | number图标大小
colorstring激活颜色
voidColorstring未激活颜色
iconComponent | string激活图标
voidIconComponent | string未激活图标
halfIconComponent | string半星图标