import{c as t,o as d,A as o}from"./vendor.80bf15c7.js";const e={class:"markdown-body"},n=o('

Popup 弹出层组件

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示

安装

import { createApp } from 'vue';\nimport { Popup } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Popup);\n

代码演示

基础用法

show 控制显示/隐藏

<nut-popup :style="{ padding: '30px' }" v-model:show="show">正文</nut-popup>\n

弹出位置

<nut-popup\n  position="top"\n  v-model:show="show"\n  :style="{ height: '20% }"\n></nut-popup>\n\n<nut-popup\n  position="left"\n  v-model:show="show"\n  :style="{ height: '100%', width: '20%' }"\n></nut-popup>\n

图标

<nut-popup\n  position="bottom"\n  closeable\n  :style="{ height: '20%' }"\n  v-model:show="show"\n></nut-popup>\n\n<nut-popup\n  position="bottom"\n  closeable\n  close-icon-position="top-left"\n  :style="{ height: '20%' }"\n  v-model:show="show"\n></nut-popup>\n\n<nut-popup\n  position="bottom"\n  closeable\n  close-icon-position="top-left"\n  close-icon="heart"\n  :style="{ height: '20%' }"\n  v-model:show="show"\n></nut-popup>\n

圆角弹框

<nut-popup\n  position="bottom"\n  closeable\n  round\n  :style="{ height: '30%' }"\n  v-model:show="show"\n></nut-popup>\n

指定挂载节点

<nut-popup :style="{ padding: '30px' }" teleport="#app" v-model:show="show">app</nut-popup\n

API

Props

参数	说明	类型	默认值
show	当前组件是否显示	Boolean	false
z-index	遮罩层级	String、Number	2000
duration	动画时长，单位秒	String、Number	0.3
overlay-class	自定义遮罩类名	String	-
overlay-style	自定义遮罩样式	CSSProperties	-
lock-scroll	背景是否锁定	Boolean	false
overlay	是否显示遮罩	Boolean	true
close-on-click-overlay	是否点击遮罩关闭	Boolean	true
position	弹出位置（top,bottom,left,right,center）	String	“center”
transition	动画名	String	-
style	自定义弹框样式	CSSProperties	-
pop-class	自定义弹框类名	String	-
closeable	是否显示关闭按钮	Boolean	true
close-icon-position	关闭按钮位置（top-left,top-right,bottom-left,bottom-right）	String	“top-right”
close-icon	自定义 Icon	String	“close”
destroy-on-close	组件销毁后是否关闭	Boolean	true
round	是否显示圆角	Boolean	false
teleport	指定挂载节点	String	“body”

Events

事件名	说明	回调参数
click	点击弹框时触发	event: Event
click-close-icon	点击关闭图标时触发	event: Event
open	打开弹框时触发	-
close	关闭弹框时触发	-
opend	遮罩打开动画结束时触发	event: Event
closed	遮罩关闭动画结束时触发	event: Event
click-overlay	点击遮罩触发	event: Event

',22),p={expose:[],setup:o=>(o,p)=>(d(),t("div",e,[n]))};export default p;

Popup 弹出层 组件

介绍

安装