Rate 评分组件

---

评分组件，可自定义评分星星图标的大小、间隔、评分数

使用指南

在 Taro 文件中引入组件

import { AtRate } from 'taro-ui'

组件依赖的样式文件（仅按需引用时需要）

@import "~taro-ui/dist/style/components/rate.scss";
@import "~taro-ui/dist/style/components/icon.scss";

一般用法

说明：

• 该组件为受控组件，开发者需要通过 onChange 事件来更新 value 值变化，value 与 onChange 函数必填

• 由于小程序组件化的限制，AtRate 嵌套在 AtForm 或原生小程序组件 Form 中的时候，onSubmit 事件获得的 event 中的 event.detail.value 始终为空对象，开发者要获取数据，可以自行在页面的 state 中获取

import Taro from '@tarojs/taro'
import { AtRate }  from 'taro-ui'
export default class Index extends Taro.Component {
  constructor () {
    super(...arguments)
    this.state = {
      value: 2
    }
  }
  handleChange (value) {
    this.setState({
      value
    })
  }
  render () {
    return (
      <AtRate
        value={this.state.value}
        onChange={this.handleChange.bind(this)}
      />
    )
  }
}

自定义星星大小

<AtRate size='15' value={this.state.value} onChange={this.handleChange} />

自定义评分数

<AtRate max={10} value={this.state.value} onChange={this.handleChange} />

只读

<AtRate value={3.5} />

参数

参数	说明	类型	可选值	默认值
value	当前评分,开发者需要通过 onChange 事件来更新 value 值，必填	Number	-	0
max	最大评分	Number	-	5
size	评分星星大小	Number / String	-	20
margin	星星间隔,单位根据环境自动转为 rpx 或 rem	Number / String	-	5

事件

事件名称	说明	返回参数
onChange	输入框值改变时触发的事件，开发者需要通过 onChange 事件来更新 value 值变化，但不填写 onChange 函数时，该组件只读	当前值 value