Overlay

Create an overlay layer to emphasize specific page elements and prevent users from performing other operations.

Basic Usage

Basic Component

Use show to control the display/hide of the overlay layer.

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

Special Styles

Embedded Content

You can embed any content on the overlay layer through the default slot.

html

<wd-button type="primary" @click="show = true">Embedded Content</wd-button>
<wd-overlay :show="show" @click="show = false">
  <view class="wrapper">
    <view class="block" @click.stop="" />
  </view>
</wd-overlay>

scss

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

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

Attributes

Parameter	Description	Type	Default Value
show	Whether to display the overlay layer	boolean	false
duration	Animation duration, in milliseconds	Record<string, number> | number | boolean	300
lock-scroll	Whether to lock background scrolling; when locked, content within the overlay will also be unable to scroll	boolean	true
z-index	Z-index level	number	10
custom-style	Root node style	string	''
custom-class	Root node style class name	string	''

Events

Event Name	Description	Parameters
click	Triggered when clicking the overlay layer	-
before-enter	Triggered before enter animation starts	-
enter	Triggered when enter animation starts	-
after-enter	Triggered after enter animation ends	-
before-leave	Triggered before leave animation starts	-
leave	Triggered when leave animation starts	-
after-leave	Triggered after leave animation ends	-

Slots

Name	Description
default	Overlay layer content

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-overlay-bg	$opac-7_55	遮罩层背景色

Source Code

Documentation

• Component