Popup 弹出层

#Popup 弹出层 | 来源: 网络整理| 查看: 265

# Popup 弹出层

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

# 平台差异说明 App（vue） App（nvue） H5 小程序 √ √ √ √ # 基本使用弹出层的内容通过slot传入，由用户自定义通过show绑定一个布尔值的变量控制弹出层的打开和收起出淤泥而不染，濯清涟而不妖打开 export default { data() { return { show: false } }, methods: { open() { // console.log('open'); }, close() { this.show = false // console.log('close'); } } } # 设置弹出层的方向可以通过mode参数设置，可以设置为left、top、right、bottom、center 人生若只如初见，何事秋风悲画扇 export default { data() { return { show: false } }, methods: { open() { // console.log('open'); }, close() { this.show = false // console.log('close'); } } } # 设置弹出层的圆角

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

人生若只如初见，何事秋风悲画扇 export default { data() { return { show: false } }, methods: { open() { // console.log('open'); }, close() { this.show = false // console.log('close'); } } } # 此页面源代码地址

页面源码地址

github

gitee # API # Props 参数说明类型默认值可选值 show 是否展示弹窗 Boolean false true overlay 是否显示遮罩 Boolean true false mode 弹出方向 String bottom top / right / bottom / center duration 遮罩打开或收起的动画过渡时间，单位ms String | Number 300 - closeable 是否显示关闭图标 Boolean false true overlayStyle 遮罩自定义样式，一般用于修改遮罩颜色，如：{background: 'rgba(3, 100, 219, 0.5)'} Object | String - - overlayOpacity 遮罩透明度，0-1之间，勿与overlayStyle共用 Number | String 0.5 - closeOnClickOverlay 点击遮罩是否关闭弹窗（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调） Boolean true false zIndex 弹出层的z-index值 Number | String 10075 - safeAreaInsetBottom 是否为留出底部安全距离 Boolean true false safeAreaInsetTop 是否留出顶部安全距离（状态栏高度） Boolean false true closeIconPos 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角 String top-right top-left / bottom-left / bottom-right round 设置圆角值，仅对mode = top | bottom | cener有效 Number | String 0 - zoom 当mode=center时是否开启缩放 Boolean true false bgColor 背景色，一般用于特殊弹窗内容场景，设置为transparent可去除默认的白色背景 String - - customStyle 用户自定义样式 Object - - # Event 事件名说明回调参数版本 open 弹出层打开 - - close 弹出层收起 - -

← Collapse 折叠面板 Modal 模态框 →

【本文地址】

公司简介

联系我们