Popup 弹出层

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

基本用法

myPopup.value.open();

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
type	String	center	弹出层类型 可选值，top,center,bottom,left,right	All
width	Number,String	null	宽,type=left,center,right有效	All
height	Number,String	null	高,type=top,center,bottom有效	All
topOffset	Number,String	null	距离顶部偏移	All
radius	Number,String	null	圆角 注意：不支持c-radius-开头的类	All
closeOnMaskClick	Boolean	true	点击遮罩关闭	All
maskBgColor	String	rgba(0, 0, 0, 0.4)	弹出层背景	All
animation	Boolean,Number,String	true	开启动画，为数字时表示动画时长	All
animationType	String,Array	null	动画类型	All
safeArea	Boolean	true	是否显示底部安全距离	All
safeAreaBgColor	String	null	底部安全距离背景色，默认和bgColor一致	All
staticShow	Boolean	false	静态显示 为true时会直接显示在页面上	All
customTabBar	Boolean	false	是否自定义tabBar	MP-WEIXIN
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

提示

微信小程序tabBar页面使用，当自定义tabBar时，需要设置customTabBar为true，否则会显示不正确。

事件

事件名	说明
open	打开
close	关闭

插槽

插槽名	说明
default	默认插槽

方法

名称	说明
open()	打开
close()	关闭

示例

<template>
    <c-popup ref="myPopup" type="bottom" radius="15" bgColor="#fff">
        <c-box height="300" c-class="c-f-center">
            <c-text text="我是底部弹出层" />
        </c-box>
    </c-popup>
</template>
<script lang="ts" setup>
// @ts-ignore
import {onReady} from '@dcloudio/uni-app'

const myPopup = ref(null);

onReady(()=>{
    myPopup.value.open();
})
</script>