更新记录

0.0.2（2023-06-30）

• fix: nvue缺少点击事件

0.0.1（2023-06-30）

• 初版，可能会存在BUG

平台兼容性

lime-fab 浮动气泡

• 基于uniapp vue3 实现的悬浮在页面边缘的可点击气泡，目前只在h5、微信小程序、APP（Nvee|vue）上测试过

  代码演示

基础用法

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

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

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

自由拖拽和磁吸

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

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

const onOffsetChange = (offset) => {
    showToast(offset.x + '__' + offset.y);
};

使用 v-model

• vue3 使用 v-model:offset 控制位置。
• vue2 使用 :offset.sync 控制位置。

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

// vue3
 const offset = ref({ x: 200, y: 400 });

 //vue2
 data() {
     return {
         offset: { x: 200, y: 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)

• 另外插件也用到了TS，vue2可能会遇过官方的TS版本过低的问题,找到HX目录下的compile-typescript目录

  // \HBuilderX\plugins\compile-typescript
  yarn add typescript -D
  // - or - 
  npm install typescript -D

API

Props

Events

Slots

主题定制

样式变量

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