uView Next
4.0.105

外观

Popup 弹出层

约 1720 字大约 6 分钟

2025-10-31

弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义。

基本使用

  • 弹出层的内容通过slot传入，由用户自定义
  • 通过show绑定一个布尔值的变量控制弹出层的打开和收起
<template>
	<view>
		<un-popup :show="show" @close="close" @open="open">
            <view class="popup-content">
                <text class="popup-title">内容展示</text>
                <text class="popup-text">这是一个弹窗示例</text>
            </view>
		</un-popup>
		<un-button @click="show = true">打开</un-button>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	
	const show = ref(false)
	
	const open = () => {
	  // console.log('open');
	}
	
	const close = () => {
	  show.value = false
	  // console.log('close');
	}
</script>
<style lang="scss">
	.popup-content {
		padding: 20px;
		text-align: center;
	}
	
	.popup-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
		color: #333;
	}
	
	.popup-text {
		font-size: 16px;
		color: #666;
		margin-bottom: 10px;
	}
</style>

设置弹出层的方向

  • 可以通过mode参数设置，可以设置为left、top、right、bottom、center
<template>
	<view>
		<un-popup :show="show" :mode="mode" @close="close" @open="open">
            <view class="popup-content">
                <view v-if="mode === 'top' || mode === 'bottom' || mode === 'center'">
                    <text class="popup-title">内容展示</text>
                    <text class="popup-text">这是一个{{mode === 'top' ? '顶部' : mode === 'bottom' ? '底部' : '居中'}}弹窗示例</text>
                    <text class="popup-desc">点击遮罩或关闭按钮可以关闭弹窗</text>
                </view>
                <view v-else-if="mode === 'left' || mode === 'right'">
                    <text class="popup-title">侧边栏内容</text>
                    <text class="popup-text">这是一个{{mode === 'left' ? '左侧' : '右侧'}}弹窗示例</text>
                    <view class="popup-menu">
                        <text class="menu-item">菜单项 1</text>
                        <text class="menu-item">菜单项 2</text>
                        <text class="menu-item">菜单项 3</text>
                    </view>
                </view>
            </view>
		</un-popup>
		<un-button @click="show = true">打开</un-button>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	
	const show = ref(false)
	const mode = ref('top')
	
	const open = () => {
	  // console.log('open');
	}
	
	const close = () => {
	  show.value = false
	  // console.log('close');
	}
</script>
<style lang="scss">
	.popup-content {
		padding: 20px;
		text-align: center;
	}
	
	.popup-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
		color: #333;
	}
	
	.popup-text {
		font-size: 16px;
		color: #666;
		margin-bottom: 10px;
	}
	
	.popup-desc {
		font-size: 14px;
		color: #999;
		margin-top: 10px;
	}
	
	.popup-menu {
		margin-top: 20px;
		text-align: left;
	}
	
	.menu-item {
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
		font-size: 16px;
		color: #333;
		
		&:last-child {
			border-bottom: none;
		}
	}
</style>

设置弹出层的圆角

需要将round设置为圆角值(仅对mode = top | bottom | center有效)。

<template>
	<view>
		<un-popup :show="show" :round="10" mode="top" @close="close" @open="open">
			<view class="popup-content">
                <text class="popup-title">内容展示</text>
                <text class="popup-text">人生若只如初见，何事秋风悲画扇</text>
            </view>
		</un-popup>
		<un-button @click="show = true">打开</un-button>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	
	const show = ref(false)
	
	const open = () => {
	  // console.log('open');
	}
	
	const close = () => {
	  show.value = false
	  // console.log('close');
	}
</script>
<style lang="scss">
	.popup-content {
		padding: 20px;
		text-align: center;
	}
	
	.popup-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
		color: #333;
	}
	
	.popup-text {
		font-size: 16px;
		color: #666;
		margin-bottom: 10px;
	}
</style>

设置外边距

通过margin属性设置弹窗的外边距。

<template>
	<view>
		<un-popup :show="show" mode="bottom" :margin="15" @close="close" @open="open">
			<view class="popup-content">
                <text class="popup-title">内容展示</text>
                <text class="popup-text">这是一个底部弹窗示例</text>
                <text class="popup-desc">点击遮罩或关闭按钮可以关闭弹窗</text>
                <text class="popup-margin-info">外边距: 15px</text>
            </view>
		</un-popup>
		<un-button @click="show = true">打开</un-button>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	
	const show = ref(false)
	const margin = ref(15)
	
	const open = () => {
	  // console.log('open');
	}
	
	const close = () => {
	  show.value = false
	  // console.log('close');
	}
</script>
<style lang="scss">
	.popup-content {
		padding: 20px;
		text-align: center;
	}
	
	.popup-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
		color: #333;
	}
	
	.popup-text {
		font-size: 16px;
		color: #666;
		margin-bottom: 10px;
	}
	
	.popup-desc {
		font-size: 14px;
		color: #999;
		margin-top: 10px;
	}
	
	.popup-margin-info {
		font-size: 14px;
		color: #606266;
		margin-top: 5px;
	}
</style>

显示标题

通过title属性设置弹窗的标题。

<template>
	<view>
		<un-popup :show="show" mode="bottom" title="这里是标题" @close="close" @open="open">
			<view class="popup-content">
                <text class="popup-title-text">这里是标题</text>
                <text class="popup-text">这是一个带标题的弹窗示例</text>
            </view>
		</un-popup>
		<un-button @click="show = true">打开</un-button>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	
	const show = ref(false)
	const title = ref('这里是标题')
	
	const open = () => {
	  // console.log('open');
	}
	
	const close = () => {
	  show.value = false
	  // console.log('close');
	}
</script>
<style lang="scss">
	.popup-content {
		padding: 20px;
		text-align: center;
	}
	
	.popup-title-text {
		font-size: 16px;
		font-weight: bold;
		color: #303133;
		margin-bottom: 15px;
		padding: 10px 0;
		border-top: 1px solid #ebeef5;
	}
	
	.popup-text {
		font-size: 16px;
		color: #666;
		margin-bottom: 10px;
	}
</style>

显示关闭按钮

通过closeable属性设置是否显示关闭按钮。

<template>
	<view>
		<un-popup :show="show" mode="bottom" :closeable="true" @close="close" @open="open">
			<view class="popup-content">
                <text class="popup-title">内容展示</text>
                <text class="popup-text">这是一个带关闭按钮的弹窗示例</text>
                <text class="popup-desc">点击遮罩或关闭按钮可以关闭弹窗</text>
            </view>
		</un-popup>
		<un-button @click="show = true">打开</un-button>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	
	const show = ref(false)
	const closeable = ref(true)
	
	const open = () => {
	  // console.log('open');
	}
	
	const close = () => {
	  show.value = false
	  // console.log('close');
	}
</script>
<style lang="scss">
	.popup-content {
		padding: 20px;
		text-align: center;
	}
	
	.popup-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
		color: #333;
	}
	
	.popup-text {
		font-size: 16px;
		color: #666;
		margin-bottom: 10px;
	}
	
	.popup-desc {
		font-size: 14px;
		color: #999;
		margin-top: 10px;
	}
</style>

API

Props

参数说明类型默认值
show是否展示弹窗booleanfalse
overlay是否显示遮罩booleantrue
mode弹出方向
Enum
bottom
title弹窗标题string-
titleStyle弹窗标题样式object | string-
duration动画时长，单位msstring | number300
closeable是否显示关闭图标booleanfalse
overlayStyle遮罩自定义样式object | string-
overlayOpacity遮罩透明度，0-1之间number | string0.5
closeOnClickOverlay点击遮罩是否关闭弹窗booleantrue
zIndex层级string | number10075
safeAreaInsetBottom是否为iPhoneX留出底部安全距离booleantrue
safeAreaInsetTop是否留出顶部安全距离（状态栏高度）booleanfalse
closeIcon自定义关闭图标stringclose
closeIconColor自定义关闭图标颜色string#909399
closeIconSize自定义关闭图标大小string | number18
closeIconPos自定义关闭图标位置
Enum
top-right
margin外边距string | number0
navbarHeight自定义导航栏高度，mode = top 时有效number0
round设置圆角值，仅对mode = top | bottom | center有效string | number16
zoom当mode=center时 是否开启缩放booleantrue
bgColor背景色，设置为transparent可去除白色背景string#ffffff
width弹窗宽度string | number-
height弹窗高度，mode = top | center | bottom时有效string | number-
customStyle组件自定义样式object | string-

Event

事件名说明类型
open弹出层打开
Function
close弹出层收起
Function

Slot

名称说明
header自定义标题
trigger自定义触发器

Scss 变量

变量名默认值说明
$un-popup-wrapper-bg-color$bg-color-container弹出层容器背景色
$un-popup-round-border-radius$radius-base弹出层圆角半径
$un-popup-title-padding15px弹出层标题内边距
$un-popup-title-font-size$text-lg弹出层标题字体大小
$un-popup-title-color$text-color弹出层标题文字颜色
$un-popup-close-hover-opacity0.4关闭图标 hover 透明度
$un-popup-close-inset-position15px关闭图标内部定位距离
$un-popup-close-outset-corner-position-50px关闭图标外部角落定位距离
$un-popup-close-outset-center-position-60px关闭图标外部中心定位距离

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档

Copyright © 2026 uView Next