Fab 悬浮按钮

悬浮动作按钮组件，支持拖拽、图标和文字，固定定位在页面边缘。纯图标时显示圆形，带文字时显示胶囊形。一次只展示一个按钮，点击切换不同用法

悬浮动作按钮组件，支持拖拽、图标（re-icon）和文字，固定定位在页面边缘。

演示

9:41

代码示例

<!-- 事件日志 -->
  <re-fab :key="current" :icon="currentConfig.icon" :text="currentConfig.text" :draggable="currentConfig.draggable" :direction="currentConfig.direction" :btn-style="currentConfig.btnStyle" :icon-style="currentConfig.iconStyle" @click="onFabClick" @drag="onFabDrag" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-fab />。

API

Fab Props

名称类型默认值描述必传
fixedboolean--N
bottomnumber--N

Fab Events

名称参数描述
click-点击时触发
dragx: number, y: number拖拽时触发

Fab Slots

名称描述
default默认插槽
Divider 分割线
分割线组件，支持水平/垂直布局、虚线样式和自定义内容
Icon 图标
基础组件图标，点击图标复制名称。当前优先使用本地 SVG 图标，也支持图片和普通文本符号