引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { FloatingBubble } from 'vant';

const app = createApp();
app.use(FloatingBubble);

基础用法

浮动气泡默认展示在右下角，并允许在 y 轴方向上下拖拽，你可以通过 icon 属性设置气泡的图标。

<van-floating-bubble icon="chat" @click="onClick" />

import { showToast } from 'vant';

export default {
  setup() {
    const onClick = () => {
      showToast('点击气泡');
    };
    return { onClick };
  },
};

自由拖拽和磁吸

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

<van-floating-bubble
  axis="xy"
  icon="chat"
  magnetic="x"
  @offset-change="onOffsetChange"
/>

import { showToast } from 'vant';

export default {
  setup() {
    const onOffsetChange = (offset) => {
      showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);
    };
    return { onOffsetChange };
  },
};

双向绑定

使用 v-model:offset 控制 FloatingBubble 的位置。

<van-floating-bubble v-model:offset="offset" axis="xy" icon="chat" />

import { ref } from 'vue';

export default {
  setup() {
    const offset = ref({ x: 200, y: 400 });
    return { offset };
  },
};

Props

Events

Slots

类型定义

组件导出以下类型定义：

export type {
  FloatingBubbleProps,
  FloatingBubbleAxis,
  FloatingBubbleMagnetic,
  FloatingBubbleOffset,
} from 'vant';

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。