Skip to content

Rate 评分

星级评分,支持键盘方向键调节,默认点击已选中的同一颗星可清空。

基础用法

基础用法

自定义数量

max

通过 max 设置星星数量。

半选

半选(allow-half)

allow-half 允许通过 value 表达半星;点击仍按整星递增。

点击清空

点击清空(allow-clear)

allow-clear="false":点已选中的星不清空

allow-clear 默认开启,再次点击当前已选中的同一颗星会清空为 0 并派发 oas-changedetail: { value: 0 });设为 "false" 后点击不清空。

自定义图标

自定义图标(icon 属性)

通过 icon 属性传入字符或 SVG 标记即可替换星星图标:

自定义图标(icon 属性 · SVG)

自定义图标(slot)

自定义图标(slot)

通过 slot="icon" 传入任意元素,会克隆到每一颗星上。优先级:icon 属性 > slot="icon" > 默认星形。

禁用

禁用

事件

变化事件

监听 oas-change(点击、清空或键盘调节,detail: { value }):

API

属性

属性说明类型默认值
allow-clear点击已选中的同一颗星时清空为 0stringtrue
allow-half允许半星boolean
disabled禁用boolean
icon自定义星星图标(字符或 SVG 标记)
max星星数量string5
value当前分值(受控)string0

事件

事件说明
oas-change分值变化,detail: { value }

插槽

名称说明
icon

图标自定义:icon 属性 > slot="icon"(克隆到每颗星)> 默认星形。

键盘:/(或 /)增减,Home 归零,End 打满。