Rate 评分
星级评分,支持键盘方向键调节,默认点击已选中的同一颗星可清空。
基础用法
基础用法
自定义数量
max
通过 max 设置星星数量。
半选
半选(allow-half)
allow-half 允许通过 value 表达半星;点击仍按整星递增。
点击清空
点击清空(allow-clear)
allow-clear 默认开启,再次点击当前已选中的同一颗星会清空为 0 并派发 oas-change(detail: { value: 0 });设为 "false" 后点击不清空。
自定义图标
自定义图标(icon 属性)
通过 icon 属性传入字符或 SVG 标记即可替换星星图标:
自定义图标(icon 属性 · SVG)
自定义图标(slot)
自定义图标(slot)
通过 slot="icon" 传入任意元素,会克隆到每一颗星上。优先级:icon 属性 > slot="icon" > 默认星形。
禁用
禁用
事件
变化事件
监听 oas-change(点击、清空或键盘调节,detail: { value }):
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
allow-clear | 点击已选中的同一颗星时清空为 0 | string | true |
allow-half | 允许半星 | boolean | — |
disabled | 禁用 | boolean | — |
icon | 自定义星星图标(字符或 SVG 标记) | — | — |
max | 星星数量 | string | 5 |
value | 当前分值(受控) | string | 0 |
事件
| 事件 | 说明 |
|---|---|
oas-change | 分值变化,detail: { value } |
插槽
| 名称 | 说明 |
|---|---|
icon | — |
图标自定义:icon 属性 > slot="icon"(克隆到每颗星)> 默认星形。
键盘:←/→(或 ↑/↓)增减,Home 归零,End 打满。