Rating 评分组件 3.0.0

评分组件，既可以用来评分，也可以用来展示评分。这是一个受控的组件，当用户点击评分之后，需要通过回调设置当前的分数，否则分数不会变化。

使用说明

引用方式

import { Rating } from '$yo-component';

// 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
// 你仍然可以通过下面这种方式来引用
import Rating from 'yo3/component/rating';

基本用法

展示一个给用户评分的组件，value 属性为当前的评分。由于这是一个 受控的 组件，所以需要通过 onChange 回调来设置当前值。

<Rating
  value={this.state.value}
  onChange={value => this.setState({value: value})}
/>

展示评分

展示一个显示评分的组件，value 属性为需要展示的评分。将 readonly 属性设置为 true 即可。

<Rating
  value={3.5}
  readonly={true}
/>

自定义样式

评分组件的样式可以通过 extraClass 来扩展。例如：可以将星星图标换成其他图标。

/**
 * yo-rating扩展
 */
@include yo-rating(
  $name: test,
  $url: "star2.png"
);

<Rating
  extraClass="yo-rating-test"
  value={this.state.value}
  onChange={value => this.setState({value: value})}
/>
属性

extraClass { String } #

为组件根节点提供额外的class。

total { Number } #

图标的总数量。

默认值: 5

value { Number } #

当前点亮的图标数。

默认值: 0

readonly { Bool } #

是否只读。当为 true 的时候，只能展示评分，不能点击；当为 false 的时候，可以点击评分

默认值: false

onChange { Function } #

(value) => void

点击评分的回调。由于 Number 是一个受控的组件，需要在该回调中设置 value 参数。

方法参数:

参数名 类型 描述 支持版本
value number 当前选择的图标数