vue3 深度修改vant-popup组件遮罩层样式（模糊，毛玻璃）效果

洋气的小呆瓜

已于 2024-08-26 16:26:54 修改

阅读量5.2k

点赞数

分类专栏： Vue 文章标签：前端 vue

于 2022-07-19 16:03:57 首次发布

本文链接：https://blog.csdn.net/m0_56565389/article/details/125874212

版权

Vue 专栏收录该内容

4 篇文章

订阅专栏

这篇博客详细介绍了如何在Vue3中使用van-popup组件，并通过`:deep()`选择器深度定制遮罩层的样式，包括背景颜色、模糊效果等。同时，讨论了`close-on-click-overlay`属性对弹框关闭行为的影响，以及如何设置自定义类名来实现特定的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

      <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（）深度修改