Vant Overlay 遮罩层
创建一个遮罩层,用于强调特定的页面元素,并阻止用户进行其他操作。
引入
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
}
}
},
嵌入内容
通过默认插槽可以在遮罩层上嵌入任意内容
<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
参数 |
说明 |
类型 |
默认值 |
show |
是否展示遮罩层 |
boolean |
false |
z-index |
z-index 层级 |
number | string |
1 |
duration |
动画时长,单位秒 |
number | string |
0.3 |
class-name |
自定义类名 |
string |
- |
custom-style v2.2.5 |
自定义样式 |
object |
- |
Events
事件名 |
说明 |
回调参数 |
click |
点击时触发 |
event: Event |
Slots
名称 |
说明 |
default v2.0.5 |
默认插槽,用于在遮罩层上方嵌入内容 |
效果演示