# Rating 星级评分

[toc]

**星级评分组件用在对服务进行评价的场景，也可以用于服务的均分值场景**

## 组件引入

在`app.json`或在页面`index.json`中引入：

```json
{
  "usingComponents": {
    "tea-rating": "../dist/rating/index"
  }
}
```

## 用法

可点击操作，仅能选择整数分，范围在 1 ～ `max`

```html
  <tea-rating current="4"></tea-rating>
```

自定义图标

```html
  <tea-rating current="1.4" icon="star"></tea-rating>
```

自定义图标颜色

```html
  <tea-rating current="1.6" icon-active-color="#0070cc" icon-color="rgba(0, 0, 0, .2)"></tea-rating>

```

不可点击操作，仅供展示（eg: 展示平均分）,可小数，但需要在0～ `max`范围内

```html
  <tea-rating current="1" readonly="{{true}}"></tea-rating>
```

自定义提示内容

```html
  <tea-rating current="{{current}}" tip="{{current}}星，{{alternative[current - 1]}}" placeholder="{{alternative[0]}}" bind:itemtap="_handleItemTap"></tea-rating>
```

```js
Page({
	data: {
		alternative: ["很差哟", "还行", "平均水平", "很棒，继续加油", "优秀"],
		current: 4
	},
	_handleItemTap(event) {
		const { value } = event.detail
		this.setData({
			current: value
		})
	}
})

```

## Props

| 参数              | 描述                     | 类型        | 默认值         |
| --------------- | ---------------------- | --------- | ----------- |
| readonly        | 是否仅展示（只读）              | `Boolean` | `false`     |
| icon            | 图标样式，必须是icon组件的name属性值 | `String`  | `star-fill` |
| iconColor       | 图标未选中时的颜色，默认#CECECE    | `String`  | `#CECECE`   |
| iconActiveColor | 图标选中时的颜色，默认#F89B01     | `String`  | `#F89B01`   |
| max             | 最大值                    | `Number`  | `5`         |
| current         | 设置当前值                  | `Number`  | `0`         |
| placeholder     | 默认提示信息                 | `String`  | `请先点击评分`    |
| tip             | 提示信息                   | `String`  | \`\`        |

## 事件

| 事件名       | 描述       | 回调参数            |
| --------- | -------- | --------------- |
| `itemtap` | 对星星点击的回调 | `{value}`返回评分分数 |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名          | 默认值               | 描述  |
| ------------ | ----------------- | --- |
| rating-color | #f89b01           | -   |
| rating-text  | @text-light-color | -   |

## 演示

![rating](/preview/rating.png)