介绍

悬浮在窗口边缘的可点击的气泡。

引入

import FloatingBubble from 'sard-uniapp/components/floating-bubble/floating-bubble.vue'

代码演示

基础使用

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

vue lang="ts"

<template>
  <sar-floating-bubble :navbar-height="navbarHeight" @click="toast('点击了')">
    <sar-icon family="demo-icons" name="chat-dots" size="48rpx" />
  </sar-floating-bubble>
</template>

<script setup lang="ts">
import { toast } from 'sard-uniapp'

const navbarHeight = uni.upx2px(88)
</script>

vue lang="js"

<template>
  <sar-floating-bubble :navbar-height="navbarHeight" @click="toast('点击了')">
    <sar-icon family="demo-icons" name="chat-dots" size="48rpx" />
  </sar-floating-bubble>
</template>

<script setup lang="js">
const navbarHeight = uni.upx2px(88);
</script>

自由拖拽和磁吸

axis 属性设置允许在 x 或 y 轴方向拖拽，magnet 属性设置松开手指后吸附到指定轴方向的最近一边。

vue lang="ts"

<template>
  <sar-floating-bubble axis="both" magnet="x" :navbar-height="navbarHeight">
    <sar-icon family="demo-icons" name="chat-dots" size="48rpx" />
  </sar-floating-bubble>
</template>

<script setup lang="ts">
const navbarHeight = uni.upx2px(88)
</script>

vue lang="js"

<template>
  <sar-floating-bubble axis="both" magnet="x" :navbar-height="navbarHeight">
    <sar-icon family="demo-icons" name="chat-dots" size="48rpx" />
  </sar-floating-bubble>
</template>

<script setup lang="js">
const navbarHeight = uni.upx2px(88);
</script>

双向绑定

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

vue lang="ts"

<template>
  <sar-floating-bubble
    v-model:offset="offset"
    axis="both"
    :navbar-height="navbarHeight"
  >
    <sar-icon family="demo-icons" name="chat-dots" size="48rpx" />
  </sar-floating-bubble>

  <view class="mt-100 text-center">
    <text>x: {{ offset.x.toFixed(0) }}</text>
    <text class="ml-20">y: {{ offset.y.toFixed(0) }}</text>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const navbarHeight = uni.upx2px(88)

const offset = ref({
  x: 200,
  y: 300,
})
</script>

vue lang="js"

<template>
  <sar-floating-bubble
    v-model:offset="offset"
    axis="both"
    :navbar-height="navbarHeight"
  >
    <sar-icon family="demo-icons" name="chat-dots" size="48rpx" />
  </sar-floating-bubble>

  <view class="mt-100 text-center">
    <text>x: {{ offset.x.toFixed(0) }}</text>
    <text class="ml-20">y: {{ offset.y.toFixed(0) }}</text>
  </view>
</template>

<script setup lang="js">
import { ref } from "vue";
const navbarHeight = uni.upx2px(88);
const offset = ref({
  x: 200,
  y: 300
});
</script>

API

FloatingBubbleProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
axis	允许拖拽的方向轴	'x' | 'y' | 'both' | 'none'	'y'
magnet	吸附到指定轴最近的一边	'x' | 'y'	-
gap-x	气泡与窗口左右两边的最小间距，单位为 px	number	24
gap-y	气泡与窗口上下两边的最小间距，单位为 px	number	24
offset (v-model)	控制气泡的位置	{ x: number; y: number }	-
draggable 1.24.2+	是否可拖拽	boolean	true
navbar-height 1.24.3+	自定义顶部导航栏的高度	number	0
tabbar-height 1.24.3+	自定义底部标签栏的高度	number	0

FloatingBubbleSlots

插槽	描述	属性
default	自定义默认内容	-

FloatingBubbleEmits

事件	描述	类型
click	点击时触发	(event: any) => void
update:offset	因用户拖拽导致位置改变时触发	(offset: { x: number; y: number }) => void

主题定制

CSS 变量

page,
.sar-portal {
  --sar-floating-bubble-z-index: 1000;
  --sar-floating-bubble-size: 96rpx;
  --sar-floating-bubble-color: var(--sar-white);
  --sar-floating-bubble-bg: var(--sar-primary);
  --sar-floating-bubble-active-opacity: var(--sar-active-opacity);
  --sar-floating-bubble-duration: var(--sar-duration);
  --sar-floating-bubble-box-shadow: var(--sar-shadow-lg);
}