{site_name}

{site_name}

🌜 搜索

Vant3 Overlay 遮罩层是一种UI组件,用于覆盖在页面上方并阻止用户与页面交互

前端 𝄐 0
vant tabbar挡住页面,vant panel,vant tab,vant-demo,vant组件,vant弹出框
Vant3 Overlay 遮罩层是一种UI组件,用于覆盖在页面上方并阻止用户与页面交互。它通常用于实现弹出框、对话框等需要用户注意的交互场景。

Vant3 Overlay 遮罩层提供以下特性:

- 可以设置遮罩层的颜色、透明度和 z-index。
- 可以设置遮罩层是否显示、是否可点击。
- 可以监听遮罩层被点击的事件。

下面是一个基本的使用示例:

html
<template>
<van-overlay :show="showOverlay" @click="onOverlayClick" />
</template>

<script>
import { ref } from 'vue';
import { Overlay } from 'vant';

export default {
setup() {
const showOverlay = ref(false);

const onButtonClick = () => {
showOverlay.value = true;
};

const onOverlayClick = () => {
showOverlay.value = false;
};

return {
showOverlay,
onButtonClick,
onOverlayClick,
};
},
};
</script>


这个例子中,我们创建了一个按钮和一个遮罩层。当按钮被点击时,遮罩层会显示出来。当用户点击遮罩层时,遮罩层会隐藏。