FloatingBubble 浮动气泡

介绍

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

代码演示

基础用法

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

<z-floating-bubble icon="setting-fill" @click="onClick" />
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const onClick = () => {
  toast.showToast('点击气泡')
}

自由拖拽和磁吸

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

<z-floating-bubble
  axis="xy"
  icon="setting-fill"
  magnetic="x"
  @offset-change="onOffsetChange"
/>
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const onOffsetChange = (offset: any) => {
  toast.showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`)
}

双向绑定

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

<z-floating-bubble v-model:offset="offset" axis="xy" icon="chat" />
const offset = ref({ x: 200, y: 400 })

API

Props

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

Events

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

Slots

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

主题定制

样式变量

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

名称默认值描述
--z-floating-bubble-size96rpx-
--z-floating-bubble-initial-gap48rpx-
--z-floating-bubble-icon-size56rpx-
--z-floating-bubble-backgroundvar(--z-primary-color)-
--z-floating-bubble-colorvar(--z-background-2)-
--z-floating-bubble-z-index999-
--z-floating-bubble-border-radius--z-floating-bubble-border-radius-