# Rate 评分
# 介绍
评分组件
# 引入
"usingComponents": {
"m-rate": "/dist/rate/index"
}
# 示例
# 基础用法
<m-rate value="{{ value }}" bind:change="onChange" />
# 半选
<m-rate value="{{ value }}" allow-half bind:change="onChange" />
# 自定义数量
<m-rate value="3.5" max="7" bind:change="onChange" />
# 自定义图形
<m-rate icon="like-fill" color="#f00" void-icon="like-fill" value="4" bind:change="onChange" />
# 只读
<m-rate value="4" readonly bind:change="onChange" />
# 辅助文字
<m-rate
value="4"
show-text
texts="{{ ['极差', '较差', '一般', '不错', '很棒'] }}"
bind:change="onChange"
/>
Page({
data: {
value: 0, // 默认分值
},
// 分值变化时回调通知
onChange(e) {
// 变化后的分值
const value = e.detail
}
})
# Properties
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 默认值 | Number | — |
| max | 图标数量 | Number | 5 |
| size | 图标大小，单位为 rpx | Number | 40 |
| icon | 选中时的图标名称 | String | star |
| color | 选中图标颜色 | String | #ffd21e |
| void-icon | 未选中时的图标名称 | String | star-fill |
| void-color | 未选中图标颜色 | String | #c7c7c7 |
| allow-half | 是否允许半选 | Boolean | false |
| readonly | 是否为只读状态 | Boolean | false |
| show-score | 是否显示当前分数 | Boolean | false |
| show-text | 是否显示辅助文字 | Boolean | false |
| text-color | 辅助文字颜色 | String | #ffd21e |
| texts | 辅助文字数组 | Array | ['极差', '较差', '一般', '不错', '很棒'] |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 分值改变时触发 | event.detail: 变更后的分值 |