Rate 评分

使用指南

Component({
  data: {
    value1: 1,
    value2: 2,
    value3: 2,
    value4: 2.5,
    value5: 2,
    value6: 2,
    value7: 2,
  },

  onChange(event) {
    const { key } = event.currentTarget.dataset;
    this.setData({
      [key]: event.detail.value,
    });
  },
});

<view>
基础用法
<tms-rate data-key="value1" value="{{ value1 }}" bind:on-change="onChange" />
</view>
<view>
禁用状态
<tms-rate data-key="value6" value="{{ value6 }}" disabled bind:on-change="onChange" />
</view>

<view>
只读状态
<tms-rate data-key="value7" value="{{ value7 }}" readonly bind:on-change="onChange" />
</view>

<view>
自定义数量,size 变化
<tms-rate data-key="value5" value="{{ value5 }}" iconSize="30" count="{{8}}" bind:on-change="onChange" />
</view>

属性

参数	说明	类型	可选值	默认值
gutter	图标间距，默认单位为 px	String,Number	—	4px
color	选中时的颜色	String	—	#ee0a24
voidColor	未选中时的颜色	String	—	#c8c9cc
allowHalf	是否允许半选	Boolean	—	false
iconSize	图标大小，默认单位为 px	String, Number	—	50rpx
value	当前分值	Number	—	—
count	图标总数	Number	—	5
icon	选中时的图标名称	String	—	star1
voidIcon	未选中时的图标名称	String	—	star1-o
readonly	是否为只读状态	Boolean	—	false
disabled	是否禁用评分	Boolean	—	false
disabledColor	禁用时的颜色	String	—	#bdbdbd

事件

事件名	说明	参数
bind:on-change	当前分值变化时触发的事件	event.detail = { value: 当前分值 }