评分
星形或心形评分，支持半星、只读、清除、文字标签。交互版本是一组 radio，键盘与读屏都可用。
带行为 核心包 1 个事件 1 个方法
示例
代码
<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>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
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 | 字符串 | 无障碍名称，默认「评分」 |
事件
| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
zh:rating | .zh-rating | { value } | 评分变化时触发（冒泡） |
方法
el.zhRating.get()：读取当前评分
样式类
zh-rating
无障碍
- 交互评分是 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。