更新记录

0.1.6（2025-08-31） 下载此版本

• chore: 更新文档

0.1.3（2025-04-23） 下载此版本

• feat: 兼容uniappx 鸿蒙next

0.1.2（2025-04-17） 下载此版本

• fix: 修复uniapp 上设置magnetic无效的问题

平台兼容性

uni-app(4.73)

uni-app x(4.75)

其他

lime-fab 悬浮按钮组件

一个功能丰富的悬浮操作按钮组件，支持多种展开方式和自定义样式。可用于页面快捷操作、导航跳转等场景。组件提供了丰富的自定义选项，可以满足各种复杂的交互需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 悬浮按钮文档 - 站点1
• 悬浮按钮文档 - 站点2
• 悬浮按钮文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-fab
2. 导入后可能需要重新编译项目
3. 在页面中使用l-fab组件

代码演示

基础用法

浮动气泡默认展示在右下角，并允许在 y 轴方向上下拖拽。

<l-fab @click="onClick" />

const onClick = () => {
    console.log('点击气泡')
};

自由拖拽和磁吸

允许 x 和 y 轴方向拖拽，吸附到 x 轴方向最近一边。

<l-fab
  axis="xy"
  magnetic="x"
  @change="onOffsetChange"
/>

const onOffsetChange = (offset) => {
    uni.showToast(offset[0] + '__' + offset[1]);
};

使用 v-model

• offset为数值数组，offset[0]为x，offset[1]为y
• vue3 使用 v-model:offset 控制位置。
• vue2 使用 :offset.sync 控制位置。

// vue3
<l-fab v-model:offset="offset" axis="xy" />
// vue2
<l-fab :offset.sync="offset" axis="xy" />

 data() {
     return {
         // [x, y]
         offset: [200, 400]
     }
 }

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

插件标签说明

l-fab 为组件标签
lime-fab 为演示标签

API文档

Props 属性说明

Events 事件

Slots 插槽

主题定制

组件提供了以下CSS变量，可用于自定义主题：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助