# 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)

# 微信小程序引入(可在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

# Events

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

# 预览

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

# 线上程序扫码预览

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