最简单的用法。
最简单的用法。
通过 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 | 减少星级评分 |