简介

fs-bubble-dialog-m 是基于 fs-bubble-dialog 封装的单例气泡弹层组件，配合 DialogCenter 使用。通过 JS 调用 fsBubbleDialog.show(options) 即可弹出气泡，无需在每个页面手动放置组件节点，统一通过 DialogCenter 管理。

使用方法

局部引入，在需要使用的页面或组件的 index.json 中配置 DialogCenter：

"usingComponents": {
  "dialog-center": "ava-ui/fxui/DialogCenter/DialogCenter"
}

在页面 index.wxml 中放置：

<dialog-center />

代码演示

基础用法

API

参数

参数	说明	类型	可选值	默认值
selector	触发元素的选择器（如 #my-btn）	String	-	''
targetRect	直接指定触发元素位置（可替代 selector），格式 {top, bottom, left, right, width, height}	Object	-	null
placement	气泡出现方向	String	top / bottom	'top'
offset	气泡与触发元素的间距（px）	Number	-	8
bgColor	气泡背景颜色	String	-	'#fff'
arrowColor	箭头颜色，默认与背景色一致	String	-	''
borderRadius	圆角大小	String	-	'8px'
padding	内边距	String	-	'8px 12px'
arrowSize	箭头大小（px）	Number	-	8
arrowOffset	箭头在气泡边上的位置	String	-	'50%'
customStyle	自定义气泡样式	String	-	''
content	气泡文本内容	String	-	''
contentColor	content 文字颜色	String	-	''
list	列表内容，格式 [{ label, value?, icon?, disabled? }]，优先级高于 content	Array	-	[]
maskBgColor	遮罩背景色	String	-	'transparent'
zIndex	层级	Number	-	1000
minSpace	首选方向所需最小剩余空间（px），不足时自动 fallback（top↔bottom）	Number	-	80
align	气泡相对触发元素的水平对齐方式	String	left / center / right	'center'

Events

名称	参数	描述
onClose	-	点击遮罩关闭气泡时触发
onOpen	-	气泡展开并完成定位后触发
onListTap	{ item, index }	列表项点击时触发（disabled 项不触发）

注意事项

• fs-bubble-dialog-m 必须配合 DialogCenter 使用，确保页面中已放置 <dialog-center />。
• 相比 fs-bubble-dialog，调用方无需在 wxml 中声明气泡节点，由 DialogCenter 统一管理。
• selector 支持 CSS 选择器，推荐使用 #id 保证唯一性。
• 若气泡位于复杂嵌套层级（如列表、弹窗中），推荐使用 targetRect 手动传入坐标绕过 DOM 查询。

打开预览