Popup popup layer

introduce

Pop-up layer container, used to display pop-up windows, information prompts, etc.

Code Demo

Basic usage

Use v-model:show to control whether the popup layer is displayed.

<z-cell title="Show popup layer" is-link @click="show = true" />
<z-popup v-model:show="show">
   <view class="popup-content"> Content </view>
</z-popup>
import { ref } from 'vue';
const show = ref(false)
<style lang="scss" scoped>
.demo-popup {
   .popup-content {
     padding: 100rpx;
     color: var(--z-text-color);
   }
}
</style>

Set the pop-up position of the pop-up window through the position attribute. The default is a centered pop-up, which can be set to top, bottom, left, right.

When a popup pops up from the top or bottom, the default width remains consistent with the screen width, and the popup height depends on the height of the content.

When the pop-up window pops up from the left or right side, the width and height are not set by default. The width and height of the pop-up window depend on the width and height of the content.

<!-- Top pop-up -->
<z-popup
   v-model:show="showTop"
   position="top"
   :custom-style="{ height: '30%' }"
></z-popup>

<!-- Bottom pop-up -->
<z-popup
   v-model:show="showBottom"
   position="bottom"
   :custom-style="{ height: '30%' }"
></z-popup>

<!-- Pop up on the left -->
<z-popup
   v-model:show="showLeft"
   position="left"
   :custom-style="{ width: '30%', height: '100%' }"
/>

<!-- Pop up on the right -->
<z-popup
   v-model:show="showRight"
   position="right"
   :custom-style="{ width: '30%', height: '100%' }"
/>

Close icon

After setting the closeable attribute, the close icon will be displayed in the upper right corner of the pop-up layer, and the icon can be customized through the close-icon attribute, and the icon position can be customized using the close-icon-position attribute.

<z-popup
   v-model:show="showClose"
   closeable
   position="bottom"
   :custom-style="{ height: '30%' }"
></z-popup>
<!-- Custom icon -->
<z-popup
   v-model:show="showCloseCustom"
   closeable
   close-icon="close-circle"
   position="bottom"
   :custom-style="{ height: '30%' }"
></z-popup>
<!-- Icon position -->
<z-popup
   v-model:show="showClosePosition"
   closeable
   close-icon-position="top-left"
   position="bottom"
   :custom-style="{ height: '30%' }"
></z-popup>

Rounded pop-up window

After setting the round attribute, the pop-up window will add different rounded corner styles according to the pop-up position.

<!-- Rounded pop-up window (centered) -->
<z-popup v-model:show="showRadiusCenter" round>
   <view class="popup-content"> Content </view>
</z-popup>

<!-- Rounded pop-up window (bottom) -->
<z-popup
   v-model:show="showRadiusBottom"
   round
   position="bottom"
   :custom-style="{ height: '30%' }"
></z-popup>

Listen for click events

Popup supports the following click events:

  • click: Triggered when the popup layer is clicked.
  • click-overlay: Triggered when the mask layer is clicked.
  • click-close-icon: Triggered when the close icon is clicked.
<z-cell title="Click event" is-link @click="showEvent = true" />
<z-popup
   v-model:show="showEvent"
   position="bottom"
   closeable
   :custom-style="{ height: '30%' }"
   @click-overlay="onClickOverlay"
   @click-close-icon="onClickCloseIcon"
></z-popup>
import { ref } from 'vue';
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const onClickOverlay = () => {
   toast.showToast('click-overlay')
}
const onClickCloseIcon = () => {
   toast.showToast('click-close-icon')
}

Listen to display events

When a Popup is opened or closed, the following events are triggered:

  • open: Triggered immediately when the popup layer is opened.
  • opened: Triggered after the popup layer is opened and the animation ends.
  • close: Triggered immediately when closing the popup layer.
  • closed: Triggered after the popup layer is closed and the animation ends.
<z-cell title="Show closing event" is-link @click="showEventHide = true" />
<z-popup
   v-model:show="showEventHide"
   position="bottom"
   closeable
   :custom-style="{ height: '30%' }"
   @open="toast.showToast('open')"
   @opened="toast.showToast('opened')"
   @close="toast.showToast('close')"
   @closed="toast.showToast('closed')"
></z-popup>
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()

API

Props

ParametersDescriptionTypeDefault value
v-model:showWhether to display the popup layerbooleanfalse
overlaywhether to display the mask layerbooleantrue
positionPop-up position, optional values are top bottom right leftstringcenter
overlay-classCustom mask layer class namestring | Array | object-
overlay-styleCustom mask layer styleobject-
durationanimation duration in milliseconds, set to 0 to disable animationnumber | string300
z-indexSet the z-index level of the pop-up window to a fixed valuenumber | string2000+
roundWhether to display rounded cornersbooleanfalse
lock-scrollWhether to lock background scrollingbooleantrue
close-on-click-overlayWhether to close the overlay after clicking itbooleantrue
closeableWhether to display the close iconbooleanfalse
close-iconClose the icon name or image link, which is equivalent to the name attribute of the Icon componentstringclose
close-icon-positionClose icon position, optional values are top-left
bottom-left bottom-right
stringtop-right
before-closeCallback function before closing, return false to prevent closing, support returning Promise(action: string) => boolean | Promise<boolean>-
icon-prefixIcon class name prefix, equivalent to the class-prefix attribute of the Icon componentstringz-icon
transitionanimation class name, equivalent to the name attribute of the transition componentstring-
safe-area-inset-topWhether to enable top safe area adaptationbooleanfalse
safe-area-inset-bottomWhether to enable bottom safe area adaptationbooleanfalse
customStylecustom styleobject-
customClassCustom class namestring-
closeIconStyleCustom close icon styleobject-

Events

Event nameDescriptionCallback parameters
clickTriggered when the popup layer is clickedevent
click-overlayTriggered when the overlay layer is clickedevent
click-close-iconTriggered when the close icon is clickedevent
openTriggered immediately when the popup layer is opened-
closeTriggered immediately when the popup layer is closed-
openedTriggered after the popup layer is opened and the animation ends-
closedTriggered after the popup layer is closed and the animation ends-

Slots

NameDescription
defaultpop-up content
overlay-contentThe content of the mask layer

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

NameDefaultDescription
--z-popup-backgroundvar(--z-background-2)-
--z-popup-transitiontransform var(--z-duration-base)-
--z-popup-round-radius32rpx-
--z-popup-close-icon-size44rpx-
--z-popup-close-icon-colorvar(--z-gray-5)-
--z-popup-close-icon-margin32rpx-
--z-popup-close-icon-z-index1-