SpeedDial 悬浮动作按钮
悬浮主按钮 + 展开子动作列表,常用于「新建/分享」等快捷操作;aria-expanded 同步,点击外部/Esc 收起,无孤儿浮层。
演示中已加
style="position: static"避免固定定位影响页面布局;实际使用默认固定在右下角。子动作展开方向由direction控制。
展开方向
direction 支持 up(默认)/ down / left / right,首个子动作始终最靠近主按钮。
方向:up / down / left / right
纯文字动作
icon 可省略,只显示 label;也支持只写 icon 不写 label。
纯文字 / 纯图标
事件
点击主按钮展开/收起派发 oas-open(detail: { open });点击子动作派发 oas-select(detail: { index, label })并自动收起。
事件反馈
受控 open
open 属性受控:外部设置/移除即展开/收起,组件自身点击也会同步属性并派发 oas-open(点击外部 / Esc 仍会收起)。
受控展开
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
actions | 子动作 JSON | string | [] |
direction | 展开方向 | string | up |
open | 展开态(受控) | boolean | — |
事件
| 事件 | 说明 |
|---|---|
oas-open | 展开/收起,detail: { open } |
oas-select | 选择子动作,detail: { index, label },随后自动收起 |
SpeedDialAction 字段:
| 字段 | 说明 | 类型 |
|---|---|---|
label | 动作文案 | string |
icon | 图标名(@oas-isui/icons 的 iconRegistry 键) | string |
行为:点击主按钮切换展开(aria-expanded 同步);点击外部或 Esc 收起(Esc 后焦点回到主按钮);展开时自动聚焦第一个子动作。默认定位 position: fixed; bottom/right,可覆盖。文档级监听仅在展开时挂载、断开连接清理,无孤儿浮层。