BottomPopup 底部弹出层

从页面底部弹出自定义内容，适合展示选择面板或操作区域。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

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

基础用法

<!-- 底部弹层 -->
<fui-bottom-popup :show="showPopup" @close="showPopup = false">
  <view>弹出内容</view>
</fui-bottom-popup>

在页面数据中声明 showPopup，通过改变该值控制显示。

属性

属性	类型	说明	官网默认值
show	Boolean	是否显示	false
background	String	内容区背景色	#fff
radius	Number / String	顶部左右圆角，单位 rpx	24
zIndex	Number / String	弹层层级，nvue 不支持	996
maskClosable	Boolean	点击遮罩时是否触发 close	true
maskBackground	String	遮罩背景色	rgba(0,0,0,.6)
safeArea	Boolean	是否适配底部安全区	true

事件

事件	说明	回调参数
close	点击可关闭的遮罩时触发，需由父组件将 show 设为 false	{}

插槽

插槽	说明
default	底部弹层内容

平台说明

nvue 中如果内部元素遮盖圆角，需要为内部元素设置相同圆角；层级由元素顺序影响。