xtf-floating-bubble

组件说明

xtf-floating-bubble 是浮动气泡组件，用于在页面边缘展示可拖拽的悬浮按钮。支持展开菜单、拖拽吸附、脉冲动画、徽标和多种视觉变体，适用于快捷操作、客服入口和分享按钮等场景。

---

基础用法

1. 最简示例

<template>
  <xtf-floating-bubble icon="share" @click="onBubbleClick" />
</template>

<script>
export default {
  methods: {
    onBubbleClick() {
      console.log('气泡点击')
    }
  }
}
</script>

2. 带菜单

通过 menu 设置展开菜单项：

<template>
  <xtf-floating-bubble icon="add" :menu="menuItems" @menu-select="onMenuSelect" />
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { key: 'share', icon: 'share', shortLabel: '分享' },
        { key: 'edit', icon: 'edit', shortLabel: '编辑' },
        { key: 'delete', icon: 'delete', shortLabel: '删除', danger: true }
      ]
    }
  },
  methods: {
    onMenuSelect(item) {
      console.log('选中:', item.key)
    }
  }
}
</script>

3. 带徽标

通过 badge 显示未读数量：

<template>
  <xtf-floating-bubble icon="chat" :badge="5" />
</template>

4. 自定义样式

通过 variant、shape 和 color 自定义外观：

<template>
  <xtf-floating-bubble
    icon="favorite"
    label="收藏"
    variant="solid"
    shape="squircle"
    color="#EF4444"
    :show-pulse="true"
  />
</template>

---

全部属性

属性	类型	默认值	作用描述	适用范围
icon	String	'share'	图标名称	图标
label	String	''	标签文字	标签
badge	String | Number	''	徽标内容	徽标
menu	Array	[]	菜单项列表	菜单
size	Number	112	气泡大小（rpx）	尺寸
variant	String	'solid'	视觉变体	视觉样式
shape	String	'circle'	形状：'circle' / 'squircle' / 'tile'	形状
menuVariant	String	'solid'	菜单项视觉变体	菜单样式
menuLayout	String	'fan'	菜单布局：'fan' / 'column' / 'grid'	菜单布局
color	String	''	自定义背景色	颜色
gradientEndColor	String	''	渐变终止色	渐变
textColor	String	''	自定义文字颜色	文字颜色
showPulse	Boolean	true	是否显示脉冲动画	动画
showMask	Boolean	true	是否显示遮罩	遮罩
closeOnMask	Boolean	true	点击遮罩是否收起	关闭行为
autoCollapse	Boolean	true	是否自动收起	自动收起
animationType	String	'lift'	动画类型	动画
animationDuration	String | Number	360	动画时长（ms）	动画
animationStagger	String | Number	42	菜单项依次出现的间隔（ms）	动画
dock	String	'auto'	吸附方向：'auto' / 'left' / 'right'	吸附
defaultPosition / initialPosition	Array | Object	null / null	初始坐标，支持 [x, y] 或 { x, y }；initialPosition 优先	初始位置
disabled	Boolean	false	是否禁用	禁用
draggable	Boolean	true	是否可拖拽	拖拽
snapToEdge	Boolean	true	是否吸附边缘	吸附
edgeOffset	Number	24	边缘偏移（rpx）	偏移
gap	Number	0	菜单项间距（rpx）；0 使用组件自适应间距	菜单
expanded	Boolean	false	是否展开	展开状态
customStyle	String | Object	''	自定义样式	动态样式覆盖

---

事件

事件名称	触发时机	回调参数	参数说明
click	点击气泡时触发	-	-
menu-select	选择菜单项时触发	(item)	归一化后的菜单项，含 key、label、shortLabel、icon、theme、color、badge、danger、disabled
update:expanded	展开状态变化时触发	(expanded)	展开状态
change	位置变化时触发	(position)	当前位置

---

主题说明

• 图标使用 xtf-icon 组件
• 徽标使用 xtf-badge 组件
• 拖拽使用 movable-area / movable-view 原生组件
• 脉冲动画使用 CSS 动画
• 菜单项支持 5 种主题色

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。