FloatingBubble 浮动气泡

介绍

悬浮在页面边缘的可点击气泡。

引入

import { createApp } from 'vue';
import { FloatingBubble } from '@szhn/dh-design-mobile';

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

代码演示

基础用法

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

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

自由拖拽和磁吸

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

<van-floating-bubble axis="xy" icon="chat" magnetic="x" />

双向绑定

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

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

API

Props

参数	说明	类型	默认值
v-model:offset	控制气泡位置	OffsetType	默认右下角坐标
axis	拖拽的方向，xy 代表自由拖拽，lock 代表禁止拖拽	'x' | 'y' | 'xy' | 'lock'	y
magnetic	自动磁吸的方向	'x' | 'y'	-
icon	气泡图标名称或图片链接，等同于 Icon 组件的 name 属性	string	-
gap	气泡与窗口的最小间距，单位为 px	number | { x: number, y: number }	24
teleport	指定挂载的节点，等同于 Teleport 组件的 to 属性	string | Element	body

Events

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

Slots

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

主题定制

样式变量

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

名称	默认值	描述
--van-floating-bubble-size	48px	浮动气泡的尺寸
--van-floating-bubble-initial-gap	24px	气泡与窗口的初始间距
--van-floating-bubble-icon-size	28px	气泡图标的大小
--van-floating-bubble-background	var(--van-primary-color)	气泡的背景色
--van-floating-bubble-color	var(--van-background-2)	气泡的文字颜色
--van-floating-bubble-z-index	999	气泡的层级
--van-floating-bubble-border-radius	--van-floating-bubble-border-radius	气泡的圆角大小