Overlay mask layer


Create a mask layer that emphasizes specific page elements and blocks other actions by the user.

Code Demo

Basic usage

<z-button type="primary" text="Show mask layer" @click="show = true" />
<z-overlay :show="show" @click="show = false" />
import { ref } from 'vue';
const show = ref(false);

Embed content

Arbitrary content can be embedded on the mask layer through the default slots.

<z-button type="primary" text="Embedded content" @click="showContent = true" />
<z-overlay :show="showContent" @click="showContent = false">
   <view class="wrapper">
     <view class="block" @click.stop />

.demo-overlay {
   .wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;

   .block {
     width: 240rpx;
     height: 240rpx;
     background-color: #fff;

Set z-index

The default z-index level of the Overlay component is 1, and you can set its z-index level through the z-index property.

<z-overlay z-index="100" />



ParametersDescriptionTypeDefault value
showWhether to display the mask layerbooleanfalse
z-indexz-index levelnumber | string1
durationanimation duration in milliseconds, set to 0 to disable animationnumber | string300
class-nameCustom class namestring-
custom-stylecustom styleobject-
lock-scrollWhether to lock background scrolling. When locked, the content in the mask layer will not be scrollablebooleantrue


Event nameDescriptionCallback parameters
clickTriggered when clickedevent


defaultThe default slot for embedding content above 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.

--z-overlay-backgroundrgba(0, 0, 0, 0.7)-