m-popup 弹出层

简述

弹出层容器，用于展示弹窗、菜单等内容，支持从顶部、底部、中间弹出。

注意

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

平台差异说明

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

演示地址

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

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

基本使用

<template>
	<view>
		<m-popup
			:show="show"
			position="bottom"
			round
			closeable
			@close="show = false"
		>
			<view>
				<text>弹出内容</text>
			</view>
		</m-popup>
	</view>
</template>

Props

参数	说明	类型	默认值
show	是否显示（与 visible 二选一，满足其一即打开）	boolean	false
visible	同 show，兼容旧字段	boolean	false
position	弹出位置，见下表	string	bottom
round	是否圆角	boolean	true
overlayOpacity	遮罩不透明度 0～1	number | string	0.5
closeable	是否显示右上角关闭	boolean	false
closeOnClickOverlay	点击遮罩是否关闭	boolean	true
zIndex	内容层 z-index（遮罩为 zIndex - 1）	number | string	999
maxHeight	内容最大高度（vh）；left / right / fullscreen 时内部为 100% 满高	number | string	80
animation	是否启用显示/隐藏过渡	boolean	true
duration	过渡时长（毫秒），与 CSS 一致	number	300

position 可选值

值	说明
top	从上滑入
bottom	从下滑入（默认）
center	居中
left	左侧抽屉（高度满屏）
right	右侧抽屉（高度满屏）
fullscreen	全屏

Events

事件名	说明	回调参数
update:show	显隐同步（与 v-model:show 配合）	boolean
update:visible	同 update:show	boolean
close	关闭（按钮、遮罩等）	—
overlay-click	点击遮罩	—

插槽

名称	说明
default	弹出层内容

示例

底部弹出

<m-popup
	:show="show"
	position="bottom"
	round
	closeable
	@close="show = false"
>
	<view>
		<text>底部弹出内容</text>
	</view>
</m-popup>

中间弹出弹窗

<m-popup
	:show="show"
	position="center"
	round
>
	<view class="dialog">
		<text>弹窗内容</text>
	</view>
</m-popup>