vant/src/overlay

Overlay

Intro

Create a mask layer to emphasize specific page elements and prevent users from performing other operations.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from 'vue';
import { Overlay } from 'vant';

const app = createApp();
app.use(Overlay);

Usage

Basic Usage

<van-button type="primary" text="Show Overlay" @click="show = true" />
<van-overlay :show="show" @click="show = false" />

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    return { show };
  },
};

Embedded Content

<van-overlay :show="show" @click="show = false">
  <div class="wrapper" @click.stop>
    <div class="block" />
  </div>
</van-overlay>

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

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
</style>

API

Props

Attribute	Description	Type	Default
show	Whether to show overlay	boolean	false
z-index	z-index	number | string	1
duration	Animation duration	number | string	0.3
class-name	ClassName	string	-
custom-class	Custom style	object	-
lock-scroll	Whether to lock background scroll	boolean	true

Events

Event	Description	Arguments
click	Emitted when component is clicked	event: MouseEvent

Slots

Name	Description
default	Default slot

CSS Variables

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

Name	Default Value	Description
--van-overlay-z-index	1	-
--van-overlay-background-color	rgba(0, 0, 0, 0.7)	-