BubbleBox 气泡框，弹出气泡式的卡片浮层。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

内容上方显示，absolute定位

通过 items 属性设置气泡框数据，direction 属性设置气泡框显示位置，position 属性设置气泡框定位类型，show 属性控制气泡框显示隐藏。

<wui-bubble-box :items="items" direction="top" position="absolute" :show="show" @click="itemClick" @close="onClose">
<wui-button type="gray" width="320rpx" height="84rpx" text="上方显示" bold @click="bubble"></wui-button>
</wui-bubble-box>

const items = ref(
    [{
        text: 'wlyyui',
        src: 'xxxxxxx.png'
    }, {
        text: '气泡框',
        src: 'xxxxxxx.png'
    }]
) 
const show = ref(false)
//显示气泡框
const bubble = ()=> {
    show.value = true
}
//气泡框item点击事件
const itemClick = (e)=> {
    console.log(e)
    onClose()
}
//隐藏气泡框
const onClose = ()=> {
    show.value = false
}

右上方显示，fixed定位

通过 `background` 属性设置气泡框背景色，`color` 属性设置气泡框文字颜色，`lineColor` 属性设置气泡框线条颜色，`items` 属性设置气泡框数据，`show` 属性控制气泡框显示隐藏。

<wui-button type="gray" width="320rpx" height="84rpx" text="右上方显示" bold @click="bubble"></wui-button>

<wui-bubble-box background="#4c4c4c" color='#fff' lineColor="#666" :items="items" :show="show" @click="itemClick" @close="onClose"></wui-bubble-box>

const items = ref(
    [{
        text: 'wlyyui',
        src: 'xxxxxxx.png'
    }, {
        text: '气泡框',
        src: 'xxxxxxx.png'
    }]
) 
const show = ref(false)
//显示气泡框
const bubble = ()=> {
    show.value = true
}
//气泡框item点击事件
const itemClick = (e)=> {
    console.log(e)
    onClose()
}
//隐藏气泡框
const onClose = ()=> {
    show.value = false
}

// ==================================================================
//items 数据格式说明，以下为约定属性，其他属性可自行增加
items: [{
	//item文本
	text: 'wlyyui',
	//字体图标name值，具体值参考wui-icon组件，传值后优先级大于图片，可选
	name: '',
	//字体图标字体大小，单位rpx，可选
	size: 48,
	//字体图标颜色，可选
	color: '',
	//图片图标src地址，可选
	src: 'xxxxxxx.png',
	//图片宽度，单位rpx，默认48
	width: 48,
	//图片高度，单位rpx，默认48
	height: 48
}]

// ==================================================================
// triangle 数据格式说明，三角箭头位置

// 当 direction 为top或bottom时，仅left和right有效，默认值right:32，单位rpx
// 当 direction 为left或right时，仅top和bottom有效，默认值bottom:32，单位rpx

{
	//三角箭头left值
	left:0,
	//三角箭头right值，与left二选一传值即可
	right:0,
	//三角箭头top值
	top:0,
	//三角箭头bottom值，与top二选一传值即可
	bottom:0
}

Slots

插槽名称	说明
default	目标内容，定位类型为absolute时使用，将内容放置组件内
content	气泡框内容，使用自定义内容时属性 items 无需传值

Props

属性名	类型	说明	默认值	平台差异说明
show	Boolean	是否显示气泡框	false	-
items	Array	气泡框数据，具体格式见下方说明	[ ]	-
width	Number, String	气泡框宽度，单位rpx	300	-
padding	Array	气泡框item项padding值，顺序：[上,右,下,左]	['26rpx', '32rpx']	-
position	String	气泡框定位类型，可选值：absolute 、fixed	fixed	-
left	Number, String	气泡框left值，单位rpx，值大于0时有效	0	-
right	Number, String	气泡框right值，单位rpx，与left二选一传值即可，值大于0时有效	0	-
top	Number, String	气泡框top值，单位rpx，值大于0时有效	0	-
bottom	Number, String	气泡框bottom值，单位rpx，与top二选一传值即可，值大于0时有效	0	-
direction	String	气泡框显示方向，可选值：left、right、top、bottom	bottom	-
zIndex	Number, String	气泡框层级z-index值	1001	Nvue不支持，默认越靠后的元素层级越高
background	String	气泡框背景颜色	#fff	-
size	Number, String	气泡框字体大小，单位rpx	32	-
color	String	气泡框字体颜色	#181818	-
fontWeight	Number, String	气泡框字体字重	400	-
showLine	Boolean	是否显示气泡框item间隔线条	true	-
lineColor	String	线条颜色	#eee	-
triangle	Object	气泡框三角箭头位置调整，具体格式见下方说明	{ }	-
isMask	Boolean	是否需要遮罩层	true	-
maskBackground	String	遮罩层背景色	transparent	-
maskClosable	Boolean	点击遮罩层是否可关闭气泡框，为true时点击触发@close事件	true	-

Events

事件名	说明	回调参数
@click	点击气泡框item项触发	{ index:item项索引值 }
@close	点击遮罩层时发，maskClosable为true时有效	-