uni-halo/.agents/skills/uniapp-project/references/components/uni-ui/uni-popup.md

uni-popup

Instructions

组件名：uni-popup

代码块： uPopup 关联组件： uni-popup-dialog , uni-popup-message , uni-popup-share , uni-transition

点击下载&安装

Syntax

• 使用 <uni-popup />（或 <uni-popup></uni-popup>，当需要包裹子节点时）。
• 遇到平台差异时，建议使用条件编译（#ifdef / #endif）显式处理。

Properties

属性名	类型	默认值	说明
animation	Boolean	true	是否开启动画
type	String	'center'	弹出方式
mask-click [即将废弃]	Boolean	true	蒙版点击是否关闭弹窗
is-mask-click [1.7.4新增]	Boolean	true	蒙版点击是否关闭弹窗
mask-background-color [1.7.4新增]	rgba	rgba(0,0,0,0.4)	蒙版颜色，建议使用 rgba 颜色值
background-color	String	'none'	主窗口背景色
borderRadius	String	-	设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
safe-area	Boolean	true	是否适配底部安全区

Events

事件称名	说明	返回值
change	组件状态发生变化触发	e={show: true｜false,type:当前模式}
maskClick	点击遮罩层触发	-

Platform Compatibility

See official docs for platform support table: https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html

Examples

Example (Example 1)

<template>
	<view>
		<button @click="open">打开弹窗</button>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>
	</view>
</template>
<script>
export default {
   methods:{
      open(){
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
        this.$refs.popup.open('top')
      }
   }
}
</script>

Example (Example 2)

<template>
	<view>
		<button @click="open">打开弹窗</button>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>
	</view>
</template>
<script>
export default {
   methods:{
      open(){
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
        this.$refs.popup.open('top')
      }
   }
}
</script>

Example (Example 3)

<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>

Example (Example 4)

<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>

Example (Example 5)

<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>

Example (Example 6)

<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>

Reference:

• Official Documentation
• Plugin Marketplace
• Local Example