sard-uniapp/components/rate/README.md

sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库

---
title: Rate
subtitle: 评分
group: 表单组件
---

## 介绍

用于对事物进行评级操作。

## 引入

```js
import Rate from 'sard-uniapp/components/rate/rate.vue'
```

## 代码演示

### 基础使用

使用 `v-model` 绑定当前值。

<<< @demo/rate/demo/Basic.vue

### 半星

设置 `allowHalf` 属性后可以选中半星。

<<< @demo/rate/demo/AllowHalf.vue

### 自定义图标

通过 `icon` 属性设置选中时的图标，`voidIcon` 属性设置未选中时的图标。
或者通过 `text` 和 `voidText` 属性设置文字代替图标。

<<< @demo/rate/demo/CustomIcon.vue

### 自定义颜色

通过 `color` 属性设置选中时的颜色，`voidColor` 设置未选中时的颜色。

<<< @demo/rate/demo/Color.vue

### 自定义尺寸和间距

通过 `size` 属性设置图标大小。
通过 `gap` 属性设置图标间距。

<<< @demo/rate/demo/Size.vue

### 自定义数量

通过 `count` 属性设置星星总数。

<<< @demo/rate/demo/Count.vue

### 允许清空

当 `clearable` 属性设置为 `true`，再次点击相同的值，或划到最左边时，可以将值重置为 0。

<<< @demo/rate/demo/Clearable.vue

### 只读和禁用

只读或禁用后不可操作。

<<< @demo/rate/demo/DisabledReadOnly.vue

## API

### RateProps

| 属性           | 描述                                           | 类型       | 默认值 |
| -------------- | ---------------------------------------------- | ---------- | ------ |
| root-class     | 组件根元素类名                                 | string     | -      |
| root-style     | 组件根元素样式                                 | StyleValue | -      |
| model-value    | 选中图标数                                     | number     | -      |
| allow-half     | 是否允许半选                                   | boolean    | false  |
| clearable      | 在点击相同值，或划到最左边时，是否将值重置为 0 | boolean    | false  |
| count          | 图标总数                                       | number     | 5      |
| size           | 图标大小                                       | string     | -      |
| gap            | 图标间距                                       | string     | -      |
| icon-family    | 图标字体                                       | string     | -      |
| icon           | 自定义选中时的图标                             | string     | -      |
| void-icon      | 自定义未选中时的图标                           | string     | -      |
| text           | 自定义选中时的文字                             | string     | -      |
| void-text      | 自定义未选中时的文字                           | string     | -      |
| color          | 选中时的颜色                                   | string     | -      |
| void-color     | 未选中时的颜色                                 | string     | -      |
| disabled       | 禁用状态                                       | boolean    | false  |
| readonly       | 只读状态                                       | boolean    | false  |
| validate-event | 是否触发表单验证                               | boolean    | true   |

### RateEmits

| 事件                     | 描述               | 类型                      |
| ------------------------ | ------------------ | ------------------------- |
| update:model-value       | 选中的值改变时触发 | `(value: number) => void` |
| change <sup>1.9.2+</sup> | 选中的值改变时触发 | `(value: number) => void` |

## 主题定制

### CSS 变量

<<< @comp/rate/variables.scss#variables