Overlay

Create an overlay that emphasizes specific page elements and prevents the user from doing anything else.

Basic usage

<button
   type="primary"
   @click="onClickShow('normal')"
>
   Show overlay
</button>

<press-overlay
   :show="options.normal"
   @click="onClickHide('normal')"
/>

export default {
   data() {
     return {
       options: {
         normal: false,
         content: false,
       },
     };
   },
   methods: {
     onClickShow(type) {
       this. options[type] = true;
     },
     onClickHide(type) {
       this. options[type] = false;
     },
   },
};

Embed content

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

<button
   type="primary"
   @click="onClickShow('content')"
>
   embedded content
</button>

<press-overlay
   :show="options.content"
   @click="onClickHide('content')"
>
   <div class="wrapper">
     <div
       class="block"
       catch:tap="noop"
     />
   </div>
</press-overlay>

export default {
   data() {
     return {
       options: {
         normal: false,
         content: false,
       },
     };
   },
   methods: {
     onClickShow(type) {
       this. options[type] = true;
     },
     onClickHide(type) {
       this. options[type] = false;
     },
     noop() {},
   },
};

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

.block {
   width: 120px;
   height: 120px;
   background-color: #fff;
}

Props

Parameter	Description	Type	Default
show	Whether to show the overlay	boolean	false
z-index	z-index level	string | number	1
duration	Animation duration, in seconds	string | number	0.3
class-name	custom class name	string	-
custom-style	custom style	string	-
lock-scroll v1.7.3	Whether to lock background scrolling, the content in the mask will not be able to scroll when locked	boolean	true

Events

Event Name	Description	Callback Parameters
click	Triggered when clicked	-

Slots

Name	Description
-	Default slot for embedding content above the mask layer

Theme customization

--overlay-background-color：