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>