Skip to content
On this page

Popup 弹出层

基本用法

v-model 为绑定值,表示是否展示弹出层。

html
<wd-popup v-model="show" custom-style="padding: 30px 40px;" @close="handleClose">内容</wd-popup>

弹出位置

设置 position,默认为 'center',可选值 'top', 'right', 'bottom', 'left'。

html
<wd-popup v-model="show" position="top" custom-style="height: 200px;" @close="handleClose"></wd-popup>

关闭按钮

设置 closable 属性。

html
<wd-popup v-model="show" position="bottom" closable custom-style="height: 200px;" @close="handleClose"></wd-popup>

禁用遮罩点击

通过设置 close-on-click-modal 属性为 false,你可以禁用用户点击遮罩层时关闭弹出层的功能。

html
<wd-popup v-model="show7" position="bottom" :close-on-click-modal="false" closable custom-style="height: 200px;" @close="handleClose7"></wd-popup>

禁用遮罩

通过设置 modal 属性为 false,你可以禁用遮罩层,使用户可以与底层内容进行交互。

html
<wd-popup v-model="show8" position="bottom" :modal="false" closable custom-style="height: 200px;" @close="handleClose8"></wd-popup>

开启底部安全区

通过设置 safe-area-inset-bottom 属性为 true,你可以确保弹出层在底部显示时不会被底部安全区域遮挡。

html
<wd-popup v-model="show9" position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose9"></wd-popup>

禁止滚动穿透

使用组件时,会发现内容部分滚动到底时,继续划动会导致底层页面的滚动,这就是滚动穿透。

目前,组件可以通过 lock-scroll 属性处理部分滚动穿透问题。 但由于小程序和APP平台自身原因,弹窗内容区域仍会出现滚动穿透。 不过,我们为开发者提供了一个推荐方案以完整解决滚动穿透:

可以使用 page-meta 组件动态修改 page-metaoverflow 属性。

html
<!-- page-meta 只能是页面内的第一个节点 -->
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>

<wd-popup v-model="show10" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose10"></wd-popup>

提示

h5 滚动穿透不需要处理,组件已默认开启 lock-scroll

H5平台

Attributes

参数说明类型可选值默认值最低版本
v-model弹出层是否显示boolean---
position弹出位置stringcenter / top / right / bottom / leftcenter-
closable关闭按钮boolean-false-
close-on-click-modal点击遮罩是否关闭boolean-true-
duration动画持续时间number / boolean-300(ms)-
z-index设置层级number-10-
custom-style自定义弹出层样式string---
modal是否显示遮罩boolean-true-
modal-style自定义modal蒙层样式string---
hide-when-close是否当关闭时将弹出层隐藏(display: none)boolean-true-
lazy-render弹层内容懒渲染,触发展示时才渲染内容boolean-true-
safe-area-inset-bottom弹出面板是否设置底部安全距离(iphone X 类型的机型)boolean-false-
lockScroll是否锁定背景滚动boolean-true0.1.30

Events

事件名称说明参数最低版本
close弹出层关闭时触发--
click-modal点击遮罩时触发--
before-enter进入前触发--
enter进入时触发--
after-enter进入后触发--
before-leave离开前触发--
leave离开时触发--
after-leave离开后触发--

外部样式类

类名说明最低版本
custom-class根节点样式-

Released under the MIT License.

Released under the MIT License.