LimeFab 浮动气泡

悬浮在页面边缘并可拖拽可点击的汽泡型悬浮按钮，自主吸附，兼容uniapp/uniappx，vue2需要配置vue/composition-api

安装

在 导入即可，首次导入可能需要重新编译

代码演示

基础用法

浮动气泡默认展示在右下角，并允许在 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]
	 }
 }

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/lime-fab/compoents/lime-fab -->
<lime-fab />

插件标签

• 默认 l-fab 为 component
• 默认 lime-fab 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Props

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

Events

事件	说明	回调参数
click	点击组件时触发	MouseEvent
change	由用户拖拽导致位置改变后触发	{x: string, y: string}

Slots

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

主题定制

样式变量

• nvue不支持 组件提供了下列 CSS 变量，可用于自定义样式

名称	默认值	描述
--l-fab-size	48px	-
--l-fab-initial-gap	24px	-
--l-fab-icon-size	28px	-
--l-fab-background	#1677ff	-
--l-fab-color	white	-
--l-fab-z-index	999	-

源代码

组件源码