# Rate 评分

# 介绍

评分组件

# 引入

"usingComponents": {
  "m-rate": "mind-ui-weapp/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 —
step 评分步长 Number 1
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

事件名称 说明 回调参数
bind:change 分值改变时触发 event.detail: 变更后的分值

←