# 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示例小程序码 |