Rate 评分
用于对事物进行评分操作。
基础用法
组件默认使用五分制，colors 可用于自定义激活图标颜色。
默认:
自定义颜色:
基础用法
不同尺寸
使用 size 在 large、default、small 三种尺寸间切换。
不同尺寸
允许半选
设置 allow-half 以启用半星评分。
允许半选
辅助文字
show-text 用于显示辅助文案，show-score 用于显示当前分值。
一般
3.7 分
辅助文字
可清空
设置 clearable 后，再次点击当前值可以将评分重置为 0。
可清空
只读
设置 disabled 可进入只读展示模式。
3.7
只读
自定义图标
通过 icon 插槽替换内置评分图标。
自定义图标
在 Nuxt 中使用
YhRate 在注册 @yh-ui/nuxt 后可直接用于 Nuxt 3/4。
平均得分:
4.5
在 Nuxt 中使用
API
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
model-value / v-model | 绑定值 | number | 0 |
max | 最大分值 | number | 5 |
disabled | 是否只读 | boolean | false |
allow-half | 是否允许半选 | boolean | false |
icon | 自定义选中图标 | string | Component | '' |
void-icon | 自定义未选中图标 | string | Component | '' |
disabled-void-icon | 禁用状态下的未选中图标 | string | Component | '' |
colors | 激活颜色，支持字符串、数组或阈值映射对象 | string | string[] | Record<number, string> | '#F7BA2A' |
void-color | 未选中颜色 | string | '#C6D1DE' |
disabled-void-color | 禁用状态下的未选中颜色 | string | '#EFF2F7' |
show-score | 是否显示当前分数 | boolean | false |
show-text | 是否显示辅助文案 | boolean | false |
text-color | 辅助文案颜色 | string | '#1f2d3d' |
texts | 辅助文案数组 | string[] | [] |
score-template | 分数显示模板 | string | '{value}' |
size | 图标尺寸 | 'large' | 'default' | 'small' | 'default' |
clearable | 再次点击当前值时是否清空 | boolean | false |
theme-overrides | 组件级主题变量覆盖 | ComponentThemeVars | undefined |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
update:modelValue | 绑定值变化时触发 | (value: number) => void |
change | 评分值变化时触发 | (value: number) => void |
Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
icon | 自定义评分图标 | { index: number, width: string, activeColor: string, voidColor: string } |
Expose
当前组件未暴露公开实例方法或属性。
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-rate-void-color | 未选中颜色 | #c6d1de |
--yh-rate-fill-color | 选中颜色 | #f7ba2a |
--yh-rate-disabled-void-color | 禁用状态下的未选中颜色 | #eff2f7 |
--yh-rate-text-color | 辅助文案颜色 | #1f2d3d |
--yh-rate-font-size | 辅助文案字号 | 14px |
--yh-rate-icon-margin | 图标间距 | 6px |
类型导出
| 名称 | 说明 |
|---|---|
YhRateProps | 组件 Props 类型 |
YhRateEmits | 组件事件类型 |
YhRateSlots | 组件插槽类型 |
YhRateSize | 尺寸联合类型 |
YhRateInstance | 组件实例类型 |