Bubble 气泡框

附着于指定目标节点上下的提示气泡框组件，支持上下左右 4 方向定位、深浅高斯毛玻璃主题、45 度指示箭头与自定义内容插槽。

---

代码示例

1. 基础用法 (Basic Usage)

<template>
  <mu-bubble placement="top" content="上方提示文字">
    <template #trigger>
      <button>点击触发气泡</button>
    </template>
  </mu-bubble>
</template>

---

2. 4 方向定位 (4 Placements)

设置 placement 属性为 top、bottom、left 或 right。

<template>
  <mu-bubble placement="top" content="Top 向上" />
  <mu-bubble placement="bottom" content="Bottom 向下" />
  <mu-bubble placement="left" content="Left 向左" />
  <mu-bubble placement="right" content="Right 向右" />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
visible / v-model:visible	是否显示气泡框	Boolean	true | false	false
placement	气泡弹出方向定位	String	top | bottom | left | right	'top'
theme	配色主题风格	String	dark (深色) | light (浅色高斯毛玻璃)	'dark'
content	简易气泡提示文字	String	-	''
trigger	触发方式	String	click | hover	'click'
showArrow	是否显示 45 度旋转指示小尖角箭头	Boolean	true | false	true
width	自定义气泡内容面板宽度	String	-	''
offset	气泡偏移量 [垂直, 水平]，单位 rpx	Array	-	[0, 0]

---

事件说明 (Events)

事件名	说明	回调参数
update:visible	v-model:visible 双向绑定更新	(visible: boolean)
show	气泡框展开弹出时触发	-
hide	气泡框收起隐藏时触发	-
change	气泡显示隐藏状态改变时触发	(visible: boolean)

---

实例方法 (Expose Methods)

方法名	说明
show()	手动展开显示气泡
hide()	手动收起隐藏气泡
toggle()	切换展开/收起状态