May 07, 2021 Vant
Create a matte layer that emphasizes specific page elements and prevents the user from performing other actions
import Vue from 'vue';
import { Overlay } from 'vant';
Vue.use(Overlay);
<van-button type="primary" text="显示遮罩层" @click="show = true" />
<van-overlay :show="show" @click="show = false" />
export default {
data() {
return {
show: false
}
}
},
The default slot allows you to embed anything on the matte layer
<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>
Parameters | Description | Type | The default |
---|---|---|---|
show | Whether to display the mask layer | boolean |
false
|
z-index | z-index level | number | string |
1
|
duration | Animation length, in seconds | number | string |
0.3
|
class-name | Custom class name | string | - |
custom-style
v2.2.5
|
Custom styles | object | - |
The name of the event | Description | Callback parameters |
---|---|---|
Click | Triggered when clicked | event: Event |
Name | Description |
---|---|
default
v2.0.5
|
The default slot for embedding content above the matte layer |