m-bottom-popup 底部弹窗

简述

底部弹窗，从底部弹出内容，支持遮罩层，适配安全区域。

注意

请以 uni_modules/m-unix 与本文为准；各端差异以 uni-app 与各平台官方文档为准。涉及隐私能力（相册、定位、剪贴板、手机号等）需在 manifest 与后台完成配置。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

效果

• 从底部向上弹出内容
• 点击蒙层关闭
• 适配 iPhone 底部安全区域
• 阻止遮罩下层滚动穿透

演示地址

与线上 H5 演示基座 分包一致（文档站右下角预览 iframe 亦指向同一路径）。

类型	地址
分包路径	pages_demo/popup/popup
线上 H5（hash）	打开演示

基本使用

<template>
	<view>
		<m-bottom-popup
			:show="showPopup"
			:height="600"
			:radius="true"
			@close="showPopup = false"
		>
			<view>
				<!-- 弹窗内容 -->
				<text>这里是弹窗内容</text>
			</view>
		</m-bottom-popup>
	</view>
</template>

<script setup lang="uts">
	const showPopup = ref(false)
</script>

Props

参数	说明	类型	默认值
show	是否显示弹窗	boolean	false
mask	是否显示遮罩蒙层	boolean	true
backgroundColor	弹窗背景颜色	string	#fff
height	弹窗高度；0 / 空串 / 无法解析为数字时按 auto；也可传 600、'80vh' 等带单位字符串	number | string	0
radius	是否显示顶部圆角	boolean	true
zIndex	弹层 z-index	number | string	999
maskZIndex	遮罩 z-index（应小于 zIndex）	number | string	998
translateY	显示时垂直偏移（如 0 表示完全顶起）	string	0
isSafeArea	是否适配底部安全区域	boolean	true

Events

事件名	说明	回调参数
close	点击蒙层关闭时触发	-

插槽

名称	说明
default	弹窗内容

示例

基础用法

<m-bottom-popup
	:show="show"
	height="800"
	@close="show = false"
>
	<view>
		<view class="content">
			<text>这是底部弹窗内容</text>
		</view>
	</view>
</m-bottom-popup>

自定义高度

<m-bottom-popup
	:show="show"
	height="400"
	@close="show = false"
>

不显示圆角

<m-bottom-popup
	:show="show"
	:radius="false"
	@close="show = false"
>

注意事项

1. 默认已经阻止了蒙层下方的滚动穿透，不需要额外处理
2. 安全区域适配默认开启，如果不需要可以关闭