Popup 弹出层

组件类型：WxPopupComponentPublicInstance

弹出层容器，用于展示弹窗、信息提示等内容。

平台兼容性

Android uni-app-x	iOS uni-app-x	web	小程序
√	×	√	×

基础用法

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1;" class="wx-pa-10">
	<!-- #endif -->
		<button class="wx-mt-15"  @click="openPopup()">中间弹出</button>
		<wx-popup ref="popupRef" mode="center" :round="12">
			<view style="width: 300px; height: 300px;" class="wx-pa-10">
				<text>弹出层</text>
			</view>
		</wx-popup>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	// 通过 ref 获取popup组件类型
	let popupRef = ref<WxPopupComponentPublicInstance | null>(null)
	let openPopup = ()=> {
		popupRef.value!.open();
	}
</script>

弹出方式

通过设置 mode 属性，来指定弹出层的弹出方式(默认为 center )。

• top 顶部弹出
• center 中间弹出
• bottom 底部弹出
• left 左侧弹出
• right 右侧弹出

<button class="wx-mt-15"  @click="openPopup()">底部弹出</button>
<wx-popup ref="popupRef" mode="bottom">弹出层</wx-popup>

设置背景色

通过设置 bgColor 属性，来设置弹出层的背景色。

<button class="wx-mt-15"  @click="openPopup()">中间弹出</button>
<wx-popup ref="popupRef" mode="center" bgColor="#e8e8e8">弹出层</wx-popup>

设置弹出层圆角

通过设置 round 属性，设置弹出层圆角。

<button class="wx-mt-15"  @click="openPopup()">中间弹出</button>
<wx-popup ref="popupRef" mode="center" :round="12">弹出层</wx-popup>

禁用点击遮罩关闭

默认情况下，点击遮罩会自动关闭 wx-popup，如不想点击关闭，只需将 closeOnClickOVerlay 设置为 false，这时候要关闭 wx-popup，只能手动调用 close 方法。

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1;" class="wx-pa-10">
	<!-- #endif -->
		<button class="wx-mt-15" @click="openPopup()">打开弹窗</button>
		<wx-popup ref="popupRef" mode="center" :round="12" :closeOnClickOVerlay="false">
			<view style="width: 300px; height: 300px;" class="wx-pa-10">
				<text>Popup</text>
	        	<button @click="closePopup">关闭</button>
			</view>
        </wx-popup>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	// 通过 ref 获取popup组件类型
	let popupRef = ref<WxPopupComponentPublicInstance | null>(null)
	let openPopup = ()=> {
		popupRef.value!.open();
	}
	let closePopup = ()=> {
		popupRef.value!.close();
	}
</script>

API

Props

名称	类型	默认值	描述
mode	string	center	弹出方式
duration	number	300	动画时长
z-index	number	999	层级
bgColor	string	#fff	主窗口背景色
closeOnClickOVerlay	boolean	true	点击遮罩是否关闭弹窗
overlayOpacity	number	0.4	遮罩层透明度
overlayStyle	n	-	自定义遮罩的样式
customStyle	n	-	自定义主题窗口样式
round	number	-	弹出层圆角值
zoom	boolean	-	mode=center时，弹出是否使用缩放模式
closeable	boolean	false	是否显示关闭图标
closeIconSize	number	-	关闭图标大小
closeIconPos	string	-	关闭图标位置

mode

值名称	描述
top	顶部弹出
center	中间弹出
bottom	底部弹出
left	左侧弹出
right	右侧弹出

closeIconPos

值名称	描述
top-left	左上角
top-right	右上角
bottom-left	左下角
bottom-right	右下角

Methods

名称	类型	必填	默认值	描述
open	() => void	是	-	打开弹出层
close	() => void	是	-	关闭弹出层

Events

名称	类型	默认值	描述
@change	(event: WxPopupChangeEvent) => void	-	insert 为 false 时，关闭弹窗日历时触发
@maskClick	() => void	-	点击遮罩时触发，closeOnClickOVerlay 为 true 时生效

WxPopupChangeEvent

名称	类型	必填	默认值	描述
show	boolean	是	-	显示状态
type	string	是	-	弹出方式

Slots

插槽名称	描述
default	默认插槽

演示效果