主题
Rate 评分
用星星展示和选择分数，可启用半星或手势选择。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 半星评分 -->
<fui-rate :score="3.5" allowHalf @change="handleRateChange" />handleRateChange 可从事件参数的 score 读取选中的分数。
属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| max | Number / String | 最大分数及星星数量 | 5 |
| score | Number / String | 当前分数，小数部分支持 0.5 | 0 |
| color | String | 未选中星星颜色 | #CCCCCC |
| activeColor | String | 已选中星星颜色 | #FFB703 |
| disabled | Boolean | 是否禁止选择 | false |
| size | Number / String | 星星大小，单位 rpx | 56 |
| spacing | Number / String | 星星间距，单位 rpx | 0 |
| allowHalf | Boolean | 是否支持半星 | false |
| halfRate | Number / String | 选择半星的比例阈值，范围 0–0.5 | 0.2 |
| touchable | Boolean | 是否允许滑动选择 | true |
| param | Number / String | 事件携带的参数 | 0 |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| change | 评分发生变化时触发 | { score, param } |
插槽
| 插槽 | 说明 |
|---|---|
| — | 官网未列出该组件的插槽 |