最简单的用法。
最简单的用法。
通过 size 属性可以控制评分组件的大小,支持三种尺寸 small, medium, large。
默认尺寸为 medium 。
默认情况下评分组件只支持整数评分,通过开启 allowHalf 属性可以支持半星评分。
设置 disabled 属性后,评分组件仅展示模式,不可选择。
组件内置了部分支持无障碍, 但是额外需要开发者手动事情才能完整支持无障碍:给 Rating 传入一个 id,就可以支持语音提示当前选择的评分。注意:如果一个页面上有多个 Rating,id 属性一定不能相同。
添加 showGrade 属性,使评分组件具有等级提示信息。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| defaultValue | 默认值 | Number | 0 |
| size | 尺寸 可选值: 'small', 'medium', 'large' | Enum | 'medium' |
| value | 值 | Number | - |
| count | 评分的总数 | Number | 5 |
| showGrade | 是否显示 grade | Boolean | false |
| allowHalf | 是否允许半星评分 | Boolean | false |
| onChange | 用户点击评分时触发的回调 签名: Function(value: String) => void 参数: value: {String} 评分值 | Function | func.noop |
| onHoverChange | 用户hover评分时触发的回调 签名: Function(value: String) => void 参数: value: {String} 评分值 | Function | func.noop |
| disabled | 是否禁用 | Boolean | false |
| readAs | 评分文案生成方法,传入id支持无障碍时,读屏软件可读 签名: Function() => void | Function | val => val |
| 按键 | 说明 |
|---|---|
| Up Arrow | 增加星级评分 |
| Down Arrow | 减少星级评分 |
| Right Arrow | 增加星级评分 |
| Left Arrow | 减少星级评分 |