BubbleBox 气泡框

概述

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

支持平台

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

温馨提示

组件内部使用了 fui-icon（字体图标） 组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiBubbleBox from "@/components/firstui/fui-bubble-box/fui-bubble-box.vue"
export default {
	components:{
		fuiBubbleBox
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。

内容上方显示，absolute定位

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

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

data() {
	return {
		items: [{
			text: 'First UI',
			src: '/static/images/common/logo.png'
		}, {
			text: '气泡框',
			src: '/static/images/common/logo.png'
		}],
		show: false
	}
},
methods: {
	//显示气泡框
	bubble() {
		this.show = true
	},
	//气泡框item点击事件
	itemClick(e) {
		console.log(e)
		this.onClose()
	},
	//隐藏气泡框
	onClose() {
		this.show = false
	}
}

右上方显示，fixed定位

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

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

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

data() {
	return {
		items: [{
			text: 'First UI',
			src: '/static/images/common/logo.png'
		}, {
			text: '气泡框',
			src: '/static/images/common/logo.png'
		}],
		show: false
	}
},
methods: {
	//显示气泡框
	bubble() {
		this.show = true
	},
	//气泡框item点击事件
	itemClick(e) {
		console.log(e)
		this.onClose()
	},
	//隐藏气泡框
	onClose() {
		this.show = false
	}
}

Slots

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

Props

属性名	类型	说明	默认值	平台差异说明
show	Boolean	是否显示气泡框	false	-
items	Array	气泡框数据，具体格式见下方说明	[ ]	-
width	Number, String	气泡框宽度，单位rpx	300	-
padding V1.6.0+	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值	997	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	-

// ==================================================================
//items 数据格式说明，以下为约定属性，其他属性可自行增加
items: [{
	//item文本
	text: 'First UI',
	//字体图标name值，具体值参考fui-icon组件，传值后优先级大于图片，可选
	name: '',
	//字体图标字体大小，单位rpx，可选
	size: 48,
	//字体图标颜色，可选
	color: '',
	//图片图标src地址，可选
	src: '/static/images/common/logo.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
}

Events

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

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)