tui-bubble-popup 气泡弹框 开源组件

介绍

Bubble Popup：最常见的右上角弹出菜单，可以做聊天对话框使用，可设置不同方向。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiBubblePopup from "@/components/thorui/tui-bubble-popup/tui-bubble-popup.vue"
export default {
	components:{
		tuiBubblePopup
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-bubble-popup": "/components/thorui/tui-bubble-popup/tui-bubble-popup"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

上方弹出菜单

通过 show 属性控制气泡弹框的显示隐藏，mask 属性控制遮罩显示隐藏，position 属性规定元素的定位类型，direction 属性设置三角箭头的方向。

<!--uni-app-->
<tui-bubble-popup :show="show" :mask="false" position="absolute" direction="bottom" @close="topBubble" width="200rpx"
left="50rpx" top="-20rpx" translateY="-100%" triangleRight="100rpx" triangleBottom="-22rpx">
 	<view class="tui-menu-item">菜单一</view>
 	<view class="tui-menu-item">菜单二</view>
 	<view class="tui-menu-item">菜单三</view>
</tui-bubble-popup>

// data 数据 及 方法
export default {
 data() {
 	return {
 		show: false
 	}
 },
 methods: {
 	topBubble() {
 		this.show = !this.show;
 	},
 }
}

.tui-menu-item {
	width: 100%;
	padding: 30rpx 20rpx;
	box-sizing: border-box;
}

<!--微信小程序-->
<tui-bubble-popup show="{{show}}" mask="{{false}}" position="absolute" direction="bottom" bindclose="topBubble" width="200rpx"
left="50rpx" top="-20rpx" translateY="-100%" triangleRight="100rpx" triangleBottom="-22rpx">
 	<view class="tui-menu-item">菜单一</view>
 	<view class="tui-menu-item">菜单二</view>
 	<view class="tui-menu-item">菜单三</view>
</tui-bubble-popup>

// data 数据 及 方法
Page({
  data: {
    show: false
  },
  change: function (e) {
      this.setData({
        show:!this.data.show
      })
  }
})

.tui-menu-item {
	width: 100%;
	padding: 30rpx 20rpx;
	box-sizing: border-box;
}

// Make sure to add code blocks to your code group

Slots

插槽名称	插槽说明
default	气泡弹框内显示内容

Props

属性名	类型	说明	默认值
width	String	宽度	300rpx
radius	String	popup圆角	8rpx
left	String	定位 left值	auto
right	String	right值	auto
top	String	top值	auto
bottom	String	bottom值	auto
translateX	String	水平方向移动距离	0
translateY	String	垂直方向移动距离	0
backgroundColor	String	背景颜色	#4c4c4c
color	String	字体颜色	#fff
borderWidth	String	三角箭头border-width	12rpx
direction	String	三角箭头方向 top left right bottom	top
triangleLeft	String	三角箭头定位left值	auto
triangleRight	String	三角箭头定位right值	auto
triangleTop	String	三角箭头定位top值	auto
triangleBottom	String	三角箭头定位bottom值	auto
position	String	定位 relative absolute fixed	fixed
flexEnd	Boolean	flex-end	false
mask	Boolean	是否需要mask	true
maskBgColor	String	遮罩背景色	rgba(0, 0, 0, 0.4)
show	Boolean	控制显示	false

Events

注：uni-app端绑定事件使用@前缀，如@close；微信小程序原生使用bind前缀，如bindclose

事件名	说明	回调参数
close	遮罩点击事件，关闭弹框	{ }

预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码