/*! For license information please see 3101.7fca4006.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["3101"],{37317:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Overlay

\n

Intro

\n

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

\n

Install

\n

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

\n
import { createApp } from 'vue';\nimport { Overlay } from 'vant';\n\nconst app = createApp();\napp.use(Overlay);\n
\n

Usage

\n

Basic Usage

\n
<van-button type="primary" text="Show Overlay" @click="show = true" />\n<van-overlay :show="show" @click="show = false" />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const show = ref(false);\n    return { show };\n  },\n};\n
\n

Embedded Content

\n
<van-overlay :show="show" @click="show = false">\n  <div class="wrapper" @click.stop>\n    <div class="block" />\n  </div>\n</van-overlay>\n\n<style>\n  .wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n  }\n\n  .block {\n    width: 120px;\n    height: 120px;\n    background-color: #fff;\n  }\n</style>\n
\n

Setting z-index

\n

The default z-index level of the Overlay component is 1. You can set its z-index level using the z-index prop.

\n
<van-overlay z-index="100" />\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
showWhether to show overlaybooleanfalse
z-indexz-indexnumber | string1
durationAnimation durationnumber | string0.3
class-nameClassNamestring-
custom-classCustom styleobject-
lock-scrollWhether to lock background scrollbooleantrue
lazy-renderWhether to lazy render util appearedbooleantrue
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
clickEmitted when component is clickedevent: MouseEvent
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultDefault slot
\n

Types

\n

The component exports the following type definitions:

\n
import type { OverlayProps } from 'vant';\n
\n

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-overlay-z-index1-
--van-overlay-backgroundrgba(0, 0, 0, 0.7)-
\n
'},null,8,e))}}}]);