tui-bubble-popup 气泡弹框

介绍

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

# 引入

# uni-app引入

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

import tuiBubblePopup from "@/components/thorui/tui-bubble-popup/tui-bubble-popup"
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>

<!--微信小程序-->
<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>

# 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