vant tabbar挡住页面,vant布局,vant弹出层,vant tab,vant组件,vant tabber
Vant4 Overlay 遮罩层是一个基于 Vue.js 的 UI 组件，用于在页面上覆盖一层半透明遮罩，并可以在遮罩上添加内容。它主要用于实现弹出框、确认框、加载提示等常见的交互效果。

使用 Vant4 Overlay 遮罩层可以方便快捷地创建与管理遮罩层，同时提供了丰富的配置选项，包括遮罩颜色、透明度、是否显示遮罩、是否可以通过点击遮罩关闭等。

以下是一个使用 Vant4 Overlay 遮罩层实现弹出框的简单例子：

html
<template>
<div>
<van-button type="primary" @click="showDialog">显示弹窗</van-button>
<van-overlay :show="showOverlay" @click="hideDialog"></van-overlay>
<van-dialog v-model="showDialog"></van-dialog>
</div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { Dialog, Button, Overlay } from 'vant';

export default defineComponent({
components: {
Dialog,
Button,
Overlay
},
setup() {
const showDialog = ref(false);
const showOverlay = ref(false);

function showDialog() {
showDialog.value = true;
showOverlay.value = true;
}

function hideDialog() {
showDialog.value = false;
showOverlay.value = false;
}

return {
showDialog,
showOverlay
};
}
});
</script>


在以上示例中，通过点击按钮触发 showDialog 函数来显示弹出框，并同时显示一个半透明的遮罩层。当用户点击遮罩层时，会触发 hideDialog 函数隐藏弹出框和遮罩层。