首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的 Vue 组件中，可以像这样使用 Overlay 组件：
<template>
<div>
<!-- 点击按钮触发遮罩层 -->
<van-button @click="showOverlay">显示遮罩层</van-button>
<!-- 使用 vant-overlay 组件控制遮罩层 -->
<van-overlay v-model="show" />
<!-- 这里放置其他页面内容 -->
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 使用 ref 创建一个响应式变量，用于控制遮罩层的显示和隐藏
const show = ref(false);
// 点击按钮时，显示遮罩层
const showOverlay = () => {
show.value = true;
};
return {
show,
showOverlay,
};
},
};
</script>
在这个例子中，我们使用了 van-button 组件来触发遮罩层，而遮罩层本身则由 van-overlay 组件控制。在 setup 函数中，通过 ref 创建了一个响应式变量 show，用于控制遮罩层的显示和隐藏。点击按钮时，show 的值变为 true，显示遮罩层。
这只是一个简单的示例，你可以根据实际需求在遮罩层上添加内容，例如模态框、弹出层等。
转载请注明出处：http://www.zyzy.cn/article/detail/5823/Vant