更新记录

0.0.4（2024-09-29） 下载此版本

• fix: 修复vue2 app条件编译问题

0.0.3（2024-09-13） 下载此版本

• feat: 兼容uniappx

0.0.2（2023-06-30） 下载此版本

• fix: nvue缺少点击事件

平台兼容性

lime-fab 浮动气泡

• lime-fab 悬浮在页面边缘并可拖拽可点击的汽泡型悬浮按钮，自主吸附，兼容uniapp/uniappx(web,ios,安卓)，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

Events

Slots

主题定制

样式变量

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