项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
仅桌面端保证样式

FloatButton 悬浮按钮 ​

固定悬浮操作按钮与按钮组:主按钮展开子项(点击外部 / Esc 收起)、徽标、悬停提示、上下两种展开方向,position-type 支持固定视口或容器内布置。

单按钮 ​

按钮组(容器内演示,点击主按钮展开) ​

点击右下角主按钮展开子项,点击空白处或按 Esc 收起

实际页面中布置到视口右下角(position-type 默认 fixed):

vue
<eb-float-button-group :position="{ right: 40, bottom: 40 }" trigger="plus">
  <eb-float-button icon="question-line" tooltip="联系客服" />
  <eb-float-button icon="edit" tooltip="意见反馈" />
</eb-float-button-group>

FloatButton API ​

名称类型默认值说明
iconString—图标名(默认插槽优先)
shapeStringcirclecircle / square
typeStringdefaultdefault / primary / danger
sizeNumber44尺寸(px)
tooltipString—悬停提示
badge-valueNumber—徽标数值

事件:click。

FloatButtonGroup API ​

名称类型默认值说明
triggerString—触发图标名;不传则平铺子按钮
close-iconStringclose展开后的收起图标
typeStringprimary主按钮语义色
shapeStringcircle子按钮形态
directionStringup展开方向 up / down
positionObject—{ top/right/bottom/left },数字按 px
position-typeStringfixedfixed(视口)/ absolute(最近定位父级)

暴露方法:toggle() / open() / close();点击组外部或 Esc 自动收起。