Skip to content

Popup

A popup layer that displays content on top of the current page.

Basic Usage

The visible attribute controls whether the popup is displayed. The position attribute sets the popup position, which can be 'center', 'top', 'right', 'bottom', 'left', default is 'center'.

html
<wd-popup :visible.sync="show" position="bottom">
  <view style="height: 200px; text-align: center; line-height: 200px;">
    Content
  </view>
</wd-popup>

Close Button

Set the closable attribute to display a close button in the popup.

html
<wd-popup :visible.sync="show" position="bottom" closable>
  <view style="height: 200px; text-align: center; line-height: 200px;">
    Content
  </view>
</wd-popup>

Close Button Position

Set the close-position attribute to customize the position of the close button, which can be 'top-left', 'top-right', 'bottom-left', 'bottom-right', default is 'top-right'.

html
<wd-popup :visible.sync="show" position="bottom" closable close-position="top-left">
  <view style="height: 200px; text-align: center; line-height: 200px;">
    Content
  </view>
</wd-popup>

Custom Close Icon

Set the close-icon attribute to customize the close icon.

html
<wd-popup :visible.sync="show" position="bottom" closable close-icon="check">
  <view style="height: 200px; text-align: center; line-height: 200px;">
    Content
  </view>
</wd-popup>

Rounded Corners

Set the border-radius attribute to customize the border radius of the popup. This attribute is only valid when the position is 'top', 'right', 'bottom', 'left'.

html
<wd-popup :visible.sync="show" position="bottom" border-radius="16px">
  <view style="height: 200px; text-align: center; line-height: 200px;">
    Content
  </view>
</wd-popup>

Disable Mask Click

Set the close-on-click-modal attribute to false to disable closing the popup when clicking the mask.

html
<wd-popup :visible.sync="show" position="bottom" :close-on-click-modal="false">
  <view style="height: 200px; text-align: center; line-height: 200px;">
    Content
  </view>
</wd-popup>

root-portal

When the root-portal attribute is set to true, the popup will be teleported to the page root node, which can avoid the influence of parent component's transform, filter and other CSS properties on the fixed positioning of the popup.

Different platforms use different implementation schemes:

  • H5: Use Vue 3's teleport feature
  • APP: Use renderjs to move elements to the uni-app root node
  • WeChat Mini Program/Alipay Mini Program: Use root-portal component
  • Other platforms: root-portal feature is not supported
html
<wd-popup v-model="show" root-portal position="center" custom-style="height: 200px;" @close="handleClose">
  <text class="custom-txt">I'm teleported to the root node</text>
</wd-popup>

Tip

This feature is mainly used to solve layering and positioning issues of popups in complex layouts, and it is recommended to enable it only when needed.

Attributes

AttributeDescriptionTypeDefaultVersion
visibleWhether to display the popup, supports the .sync modifierbooleanfalse-
positionPopup positionstringcenter-
closableWhether to display the close buttonbooleanfalse-
close-positionClose button positionstringtop-right-
close-iconClose button iconstringclose-
modalWhether to display the maskbooleantrue-
modal-styleCustom mask styleobject--
modal-classCustom mask classstring--
z-indexz-indexnumber10-
lazy-renderWhether to lazily render the popupbooleantrue-
close-on-click-modalWhether to close the popup when clicking the maskbooleantrue-
durationAnimation durationnumber300(ms)-
custom-styleCustom popup styleobject--
border-radiusBorder radius of the popupstring0-
safe-area-inset-bottomWhether to enable bottom safe area adaptationbooleanfalse-
root-portalWhether to break away from the page to solve various fixed failure issuesbooleanfalse$LOWEST_VERSION$

Events

Event NameDescriptionParametersVersion
openTriggered when the popup is opened--
openedTriggered when the popup opening animation ends--
closeTriggered when the popup is closed--
closedTriggered when the popup closing animation ends--
click-modalTriggered when the mask is clicked--

Slots

NameDescriptionVersion
defaultContent of the popup-

External Style Classes

Class NameDescriptionVersion
custom-classRoot node custom class-

Source Code

Documentation
Component

Released under the MIT License.

Released under the MIT License.