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 | 气泡与窗口的最小间距,单位为 px | number | 24 |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击组件时触发 | MouseEvent |
offset-change | 由用户拖拽导致位置改变后触发 | {x: string, y: string} |
Slots
名称 | 说明 |
---|---|
default | 自定义气泡显示内容 |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--z-floating-bubble-size | 96rpx | - |
--z-floating-bubble-initial-gap | 48rpx | - |
--z-floating-bubble-icon-size | 56rpx | - |
--z-floating-bubble-background | var(--z-primary-color) | - |
--z-floating-bubble-color | var(--z-background-2) | - |
--z-floating-bubble-z-index | 999 | - |
--z-floating-bubble-border-radius | --z-floating-bubble-border-radius | - |