LimeUI+1.2.0

主题

LimeFab 悬浮按钮组件 ​

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

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

文档链接 ​

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

安装方法 ​

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

代码演示 ​

基础用法 ​

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

html
<l-fab @click="onClick" />
js
const onClick = () => {
    console.log('点击气泡')
};

自由拖拽和磁吸 ​

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

html
<l-fab
  axis="xy"
  magnetic="x"
  @change="onOffsetChange"
/>
js
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 控制位置。
html
// vue3
<l-fab v-model:offset="offset" axis="xy" />
// vue2
<l-fab :offset.sync="offset" axis="xy" />
js
 data() {
	 return {
		 // [x, y]
		 offset: [200, 400]
	 }
 }

Vue2使用说明 ​

main.js中添加以下代码：

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

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

插件标签说明 ​

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

API文档 ​

Props 属性说明 ​

参数说明类型默认值
v-model:offset控制气泡位置number[]默认右下角坐标
axis拖拽的方向，xy 代表自由拖拽，lock 代表禁止拖拽'x' | 'y' | 'xy' | 'lock'y
magnetic自动磁吸的方向'x' | 'y'-
gap气泡与窗口的最小间距，单位为 px'number' | 'string'24

Events 事件 ​

事件说明回调参数
custom-click点击组件时触发UniTouchEvent
offset-change由用户拖拽导致位置改变后触发[x: number, y: number]

Slots 插槽 ​

名称说明
default自定义气泡显示内容

主题定制 ​

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

变量名称默认值描述
--l-fab-width48px按钮宽度尺寸
--l-fab-height48px按钮宽度尺寸
--l-fab-initial-gap24px初始位置边距（距离右下角）
--l-fab-icon-size28px图标大小
--l-fab-bg-color$primary-color按钮背景色
--l-fab-colorwhite图标/文本颜色
--l-fab-z-index999层级高度
--l-fab-border-radius999px圆角半径（圆形）

支持与赞赏 ​

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

支付宝赞助微信赞助
支付宝赞赏码微信赞赏码

源代码 ​

组件源码