简介

气泡弹层组件，基于 fs-bubble 封装。传入触发元素的选择器，在其周边弹出带箭头指向的气泡浮层（fixed 定位），支持上下左右四个方向；点击气泡外区域自动关闭。

使用方法

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

"usingComponents": {
  "fs-bubble-dialog": "ava-ui/fxui/fs-bubble-dialog/index"
}

代码演示

基础用法

API

参数

参数	说明	类型	可选值	默认值
show	控制气泡显示/隐藏	Boolean	-	false
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

名称	参数	描述
close	-	点击气泡外区域（遮罩）时触发，父组件需在此回调中将 show 置为 false
open	-	气泡展开并完成定位计算后触发
list-tap	{ item, index }	点击列表项时触发（disabled 项不触发），并自动关闭气泡

Slot

暂不支持 slot，请通过 content 属性传入文本内容。

注意事项

• selector 支持 CSS 选择器语法（如 #id、.class），推荐使用 id 选择器以保证唯一性。
• 当气泡位于触发元素上方（placement="top"）时，气泡的定位基准为 bottom；左侧（placement="left"）时，定位基准为 right。
• 若使用 targetRect 属性，可绕过 DOM 查询，适用于在列表、弹窗等复杂层级中使用时手动传入坐标。
• 组件内部使用 fixed 定位，建议在页面级直接使用，避免被父元素 transform 或 overflow:hidden 影响。

打开预览