@tanzhenxing/zx-floating-bubble v1.0.2

zx-floating-bubble 浮动气泡

悬浮在页面边缘的可点击气泡，支持拖拽和磁吸效果。

平台兼容性

基本使用

通过 icon 属性设置气泡的图标。

<template>
  <zx-floating-bubble icon="chat-o" @click="onClick" />
</template>

<script setup>
const onClick = () => {
  uni.showToast({
    title: '点击气泡',
    icon: 'none'
  });
};
</script>

自由拖拽和磁吸

通过 axis 属性设置拖拽方向，magnetic 属性设置磁吸方向。

• axis: 可选值为 'x', 'y', 'xy', 'lock'。默认为 'y'。
  • 'x': 只能在 x 轴方向拖拽
  • 'y': 只能在 y 轴方向拖拽
  • 'xy': 可以在 x 和 y 轴方向自由拖拽
  • 'lock': 禁止拖拽
• magnetic: 可选值为 'x', 'y'。
  • 'x': 拖拽释放后，自动吸附到 x 轴方向最近的边缘。
  • 'y': 拖拽释放后，自动吸附到 y 轴方向最近的边缘。

<template>
  <zx-floating-bubble
    axis="xy"
    icon="scan"
    magnetic="x"
    @offset-change="onOffsetChange"
  />
</template>

<script setup>
const onOffsetChange = (offset) => {
  console.log(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);
};
</script>

双向绑定 offset

使用 v-model:offset 控制浮动气泡的位置。

<template>
  <zx-floating-bubble v-model:offset="offset" axis="xy" icon="setting-o" />
  <view>当前位置: x: {{ offset.x.toFixed(0) }}, y: {{ offset.y.toFixed(0) }}</view>
  <button @click="resetPosition">重置位置</button>
</template>

<script setup>
import { ref } from 'vue';

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

const resetPosition = () => {
  offset.value = { x: 20, y: 300 };
};
</script>

自定义内容

通过默认插槽自定义气泡显示内容。

<template>
  <zx-floating-bubble axis="xy">
    <view style="font-size: 12px; color: white;">客服</view>
  </zx-floating-bubble>
</template>

API

Props

Events

Slots

Methods

通过 ref 获取组件实例后，可以调用以下方法：

<template>
  <zx-floating-bubble ref="bubbleRef" />
  <button @click="toggleBubble">切换显示</button>
</template>

<script setup>
import { ref } from 'vue';
const bubbleRef = ref(null);

const toggleBubble = () => {
  bubbleRef.value?.toggle();
}
</script>