Popup popup layer

introduce

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

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>

Popup location

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.

<!-- 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()

Props

Events

Slots

Style variables

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