# 评分

星形或心形评分，支持半星、只读、清除、文字标签。交互版本是一组 radio，键盘与读屏都可用。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<div class="zh-rating" id="rt" data-value="3" data-label="服务评分" data-labels="很差,较差,一般,满意,很好"></div>
<div class="zh-rating" data-value="3.5" data-half data-show-value data-label="口味评分"></div>
<div class="zh-rating" data-readonly data-value="4.27" data-show-value data-label="综合评分"></div>

<script>
document.getElementById('rt').addEventListener('zh:rating', function (e) {
  console.log(e.detail.value);
});
</script>
```

## 样式类

`zh-rating`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `data-value` | .zh-rating | 数字 | 当前评分；只读时可以是小数（如 4.27），会按比例填充 |
| `data-count` | .zh-rating | 整数，默认 5 | 总数 |
| `data-half` | .zh-rating | 布尔属性 | 允许半星 |
| `data-readonly / data-disabled` | .zh-rating | 布尔属性 | 只读展示 / 禁用 |
| `data-clear` | .zh-rating | 布尔属性 | 再次点击同一个分数、或按 Delete / Backspace 清除评分 |
| `data-icon` | .zh-rating | star（默认）\| heart | 图标 |
| `data-labels` | .zh-rating | 逗号分隔的文字，如 很差,较差,一般,满意,很好 | 每一档的文字，选中时显示在旁边 |
| `data-show-value` | .zh-rating | 布尔属性 | 在旁边显示数字 |
| `data-label` | .zh-rating | 字符串 | 无障碍名称，默认「评分」 |

## 方法

- `el.zhRating.get()`：读取当前评分

## 事件

| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
| `zh:rating` | .zh-rating | { value } | 评分变化时触发（冒泡） |

## 无障碍

- 交互评分是 radiogroup，每个分值一个 radio，方向键切换，带「3 星 · 一般」形式的 aria-label
- 只读评分是 role="img"，读作「综合评分 4.3 分，满分 5 分」
- 悬停时预览分数，移开后还原

## 常见问题

### 评分是什么？

星形或心形评分，支持半星、只读、清除、文字标签。交互版本是一组 radio，键盘与读屏都可用。

### 怎么使用评分？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写；需要用代码控制时，用「方法」里列出的接口。

### 评分有哪些事件？

zh:rating（评分变化时触发（冒泡））。

### 评分有哪些方法？

el.zhRating.get()：读取当前评分。

### 评分支持键盘和读屏吗？

交互评分是 radiogroup，每个分值一个 radio，方向键切换，带「3 星 · 一般」形式的 aria-label；只读评分是 role="img"，读作「综合评分 4.3 分，满分 5 分」；悬停时预览分数，移开后还原。

### 评分需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。