<van-popup
v-model:show="showWallet"
closeable
:close-on-click-overlay="false" // 点击遮罩层后关闭 false 不能关闭,true 能关闭弹框
overlay-class="header-overlay" // 自定义遮罩层类名 !!!
position="right"
:style="{ height: '100%', background: '#303237' }"
>
</van-popup>
css
:deep(.header-overlay) {
background-color:'#fff'; // 遮罩层颜色
backdrop-filter: blur(6px); // 模糊效果
}
:deep(自定义遮罩层的名字) vue3 使用 :deep()深度修改
vue3 深度修改vant-popup组件遮罩层样式(模糊,毛玻璃)效果
于 2022-07-19 16:03:57 首次发布
这篇博客详细介绍了如何在Vue3中使用van-popup组件,并通过`:deep()`选择器深度定制遮罩层的样式,包括背景颜色、模糊效果等。同时,讨论了`close-on-click-overlay`属性对弹框关闭行为的影响,以及如何设置自定义类名来实现特定的交互体验。
摘要由CSDN通过智能技术生成