fab 悬浮按钮，可拖拽，磁吸，扩展

更新记录

1.0.5（2025-04-01）下载此版本

更新示例工程

1.0.4（2025-04-01）下载此版本

更新示例工程

1.0.3（2025-04-01）下载此版本

新增部分属性和方法

平台兼容性

Vue2	Vue3
×	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.1.0 app-vue	×	√	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序	鸿蒙元服务
×	×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

悬浮按钮（可拖拽/磁吸/扩展） [sv-fab]

一、简介

可拖拽，可固定
可磁吸吸边
可配置磁吸安全距离
开放插槽以供样式自定义
提供内置扩展按钮组件（环形/列形）
等等

二、兼容性

✅已兼容，❌未兼容，➖未知（没测过）

VUE2	VUE3	APP(Android)	APP(iOS)	H5	微信小程序	其他小程序
❌ ️	✅️	✅	➖	✅ ️️	✅️️	➖️️

三、开始

因为本插件不依赖其他第三方插件，因此直接点击右上角绿色按钮 下载并导入HBuilderX 导入至你的项目中即可使用
强烈建议先点击右上角蓝色按钮 使用HBuilderX导入示例项目 ，跑一下示例看亿下先，部分写法可以直接抄示例

四、基本使用

sv-fab 悬浮按钮主体

符合uni_modules规范，无需引入直接使用

props

属性名	类型	默认值	说明
safeArea	String	'0,0,0,0'	安全区域上,右,下,左
defaultAxis	Array	[ ]	默认坐标 [x, y] （左上角为原点，单位px）
size	Number	50	尺寸单位px
fixed	Boolean	false	是否固定（不允许移动）
magnet	Boolean, String	true	是否磁吸，或者指定边磁吸`trbl`（例：含有`rl`即为只吸右左边）
extend	Boolean	true	是否支持扩展
disabled	Boolean	false	是否禁用，若被禁用，其扩展也同步禁用

emits

事件名	参数	说明	兼容性
action	Boolean	按钮事件，参数为当前扩展按钮组显隐	通用
moveStart	{ distance: [上, 右, 下, 左] 边距, direction: 吸边方向, position: [x, y] 当前坐标 }	移动开始事件	通用
moving	同上	移动中事件	通用
moveEnd	同上	移动结束事件	通用

注意：action 事件触发时，因为事件处理机制顺序，必先触发 moveStart 和 moveEnd 之后才触发 action 事件，因此上述三个 move 事件非必要建议不做其他自定义处理，若需缓存悬浮按钮位置，建议在 moveEnd 中缓存 position: [x, y] 当前坐标

expose

方法名	参数	说明	兼容性
toggleExtend	无	手动切换扩展显隐的方法	通用
openExtend	无	手动显示扩展的方法	通用
closeExtend	无	手动隐藏扩展的方法	通用

当悬浮按钮被 disabled 后，仍可通过以上三个 api 手动控制扩展显隐

slots

插槽名	说明	兼容性
main	主按钮插槽	通用
extend	扩展按钮组插槽，建议搭配内置扩展组件使用	通用

extend-round 环形扩展

与编辑器本体分离，按需引入使用

import ExtendRound from '@/uni_modules/sv-fab/components/sv-fab/extend-round.vue'

props

属性名	类型	默认值	说明
extendGroup	Array	[{ id: 'e1', name: '第1' }, ...]	子项必须含有唯一id字段，其他字段随意。`子项个数不要超过5个`
extendItemSize	Number	40	扩展按钮尺寸单位px

注意：extend-round 环形扩展的 extendGroup 最大长度限制为5，若有5个以上的需求，建议使用 extend-row 列形扩展

emits

事件名	参数	说明	兼容性
extendAction	extendGroup 中当前扩展项	当前扩展按钮事件	通用

slots

插槽名	说明	兼容性
extendGroup 中扩展项id	每个扩展项的id分别对应各自插槽名，每个扩展按钮皆可自定义	通用

extend-row 列形扩展

与编辑器本体分离，按需引入使用

import ExtendRow from '@/uni_modules/sv-fab/components/sv-fab/extend-row.vue'

props

属性名	类型	默认值	说明
extendGroup	Array	[{ id: 'e1', name: '第1' }, ...]	子项必须含有唯一id字段，其他字段随意。`子项个数不要超过5个`
extendItemSize	Number	40	扩展按钮尺寸单位px
placement	String	'auto'	扩展位置，可选 auto top bottom left right
rowType	String	'row'	排列方式，可选 row column
rowDirection	String	'top'	排列方向，可选 top bottom left right

placement 扩展放置的位置，和 rowDirection 排列的方向需要区分，placement 为 auto 状态下 rowDirection 才会生效，rowDirection 排列方向以吸边为底，例如吸附边为 right，则此时设备右侧为底边，top 即为设备左侧

emits

事件名	参数	说明	兼容性
extendAction	extendGroup 中当前扩展项	当前扩展按钮事件	通用

slots

插槽名	说明	兼容性
extendGroup 中扩展项id	每个扩展项的id分别对应各自插槽名，每个扩展按钮皆可自定义	通用

其他配置

@/uni_modules/sv-fab/components/sv-fab/extend-config.js 当环形扩展组件位置偏移时，可通过此配置文件进行调整

五、结语

感谢您使用本插件，如果在使用过程中遇到任何问题，欢迎在评论区留言（希望能给五星后留言，我将及时反馈），或在Q群参与讨论，我会尽快回复您。

若直接在插件市场的讨论群中提问，我可能无法及时回复您，还请谅解。

制作不易，还望五星好评，或在 Gitee 上点个star⭐，如能打赏，不胜感激Thanks♪(･ω･)ﾉ

欢迎加群讨论，Q群： ① 852637893 ② 816646292 ② 704990626

wx群可通过Q群中扫码进群