Gitee
Appearance
Rate 评分
介绍
Rate 组件用来对事物进行打分。
基础用法
通过v-model双向绑定评分值。
自定义样式
通过size属性可以设置图标大小，通过color和void-color属性可以分别设置选中时和未选中时的颜色，通过icon和void-icon属性可以分别设置选中时和未选中时的图标。
可选半星
设置allow-half属性，可以选择半颗星。
自定义数量
通过count属性可以自定义星星的总数。
可清空
设置clearable属性后，重复选中相同的评分将清空评分。
禁用状态
通过disabled属性可以使组件处于禁用状态，不可编辑。
只读状态
通过readonly属性可以使组件处于只读状态，不可编辑。
在只读状态显示小数
如果readonly且allow-half，则组件可以显示小数评分。
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | number | 0 | 当前评分，支持语法糖v-model |
| size | number | string | -- | 图标大小，单位px |
| clearable | boolean | false | 是否可清空，如果为真，则再次点击相同的分数时清空评分 |
| readonly | boolean | false | 是否只读 |
| disabled | boolean | false | 是否禁用 |
| allowHalf | boolean | false | 是否可选半颗星 |
| icon | string | 's-star' | 选中时的图标名称 |
| voidIcon | string | 's-star-o' | 未选中时的图标名称 |
| color | string | -- | 选中时的填充颜色 |
| voidColor | string | -- | 未选中时的填充颜色 |
| disabledColor | string | -- | 禁用时的填充颜色 |
| count | number | string | 5 | 图标总数量，默认为 5 个 |
| gutter | number | string | -- | 图标之间的间距，单位px |
| touchable | boolean | true | 是否可以通过滑动改变评分 |
| iconPrefix | string | -- | 图标名称的前缀 |
事件
| 事件名 | 类型 | 说明 |
|---|---|---|
| change | EventEmitter<number> | 评分变更事件，评分值变化时触发 |
CSS 变量
| 名称 | 默认值 | 说明 |
|---|---|---|
| --fm-rate-icon-size | 20px | -- |
| --fm-rate-icon-gutter | var(--fm-padding-base) | -- |
| --fm-rate-icon-void-color | var(--fm-gray-4) | -- |
| --fm-rate-icon-full-color | var(--fm-orange-3) | -- |
| --fm-rate-icon-disabled-color | var(--fm-gray-4) | -- |