首先，确保你已经安装了Vant3组件库。你可以使用npm或者yarn进行安装：
npm install vant@next
# 或者
yarn add vant@next
然后，在你的Vue组件中引入并注册Overlay组件：
<template>
<div>
<van-button @click="showOverlay">显示遮罩层</van-button>
</div>
</template>
<script>
import { ref } from 'vue';
import { Overlay, Button } from 'vant';
export default {
components: {
[Button.name]: Button,
},
setup() {
const showOverlay = () => {
const overlayInstance = Overlay({
show: true,
duration: 2000, // 设置遮罩层显示的时长，单位为毫秒，可选
});
// 模拟异步操作
setTimeout(() => {
overlayInstance.close(); // 关闭遮罩层
}, 2000);
};
return {
showOverlay,
};
},
};
</script>
在上述例子中，我们使用Vue 3的ref函数创建一个响应式的showOverlay函数，用于显示遮罩层。然后，在模板中使用<van-button>标签引入了Vant3的按钮组件，并通过@click监听按钮点击事件，触发showOverlay方法。
在showOverlay方法中，我们调用Overlay函数创建遮罩层实例。通过show设置遮罩层的显示状态，通过duration设置遮罩层显示的时长，单位为毫秒，可选。
在这个例子中，我们使用setTimeout模拟一个异步操作，2秒后关闭遮罩层。实际项目中，你可以在异步操作完成后调用 overlayInstance.close() 关闭遮罩层。
请确保你的项目已正确配置Vant3，并根据你的实际需求调整代码。
转载请注明出处：http://www.zyzy.cn/article/detail/5739/Vant