BubbleBox 气泡框

展示带箭头的菜单或自定义气泡内容，支持固定定位与相对定位。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 点击遮罩后由页面关闭气泡 -->
<fui-bubble-box :show="showBubble" :items="[{ text: '编辑' }, { text: '删除' }]"
  @click="handleBubbleClick" @close="showBubble = false" />

属性

尺寸和位置偏移单位为 rpx。

属性	类型	说明	官网默认值
show	Boolean	是否显示	false
items	Array	菜单项对象数组，使用 text、name 或 src 等字段	[]
width	Number / String	气泡宽度	300
padding	Array	菜单项内边距	['26rpx', '32rpx']
position	String	定位方式：absolute 或 fixed	fixed
left	Number / String	左侧偏移，大于 0 时生效	0
right	Number / String	右侧偏移，大于 0 时生效	0
top	Number / String	顶部偏移，大于 0 时生效	0
bottom	Number / String	底部偏移，大于 0 时生效	0
direction	String	箭头方向：left、right、top、bottom	bottom
zIndex	Number / String	层级，nvue 不支持	997
background	String	气泡背景色	#fff
size	Number / String	文字大小	32
color	String	文字颜色	#181818
fontWeight	Number / String	文字字重	400
showLine	Boolean	是否显示项间分隔线	true
lineColor	String	分隔线颜色	#eee
triangle	Object	箭头位置配置，可设置 left、right、top 或 bottom	{}
isMask	Boolean	是否显示遮罩	true
maskBackground	String	遮罩颜色	transparent
maskClosable	Boolean	点击遮罩是否触发 close	true

事件

事件	说明	回调参数
click	点击菜单项	{ index }
close	点击可关闭的遮罩	{}

收到 close 后由页面更新 show；nvue 中元素顺序影响层级。

插槽

插槽	说明
default	absolute 定位时放置气泡的目标内容
content	自定义内容