vantui中遮罩层怎么留出一块空白

效果是这样的中间需要留出一篇空白做引导上面还有一个图片,那个文字是使用v-for循环做的,怎么留出空白呢

1、最简单快捷的方法，让UI整个背景切给你，当中那块切图成全透明。

2、稍微复杂点的方法，自己写一个遮罩层，遮罩层写一个内容一样的div，定位到一样的位置，相当于完全覆盖。

3、最复杂的方法，但可以让这块显示的区域能交互（比如说右上角的分享，如果切图或者覆盖是不能点的，除非另外再添加一个点击事件）。

方法是分成上下左右四个遮罩，分别定位到内容的四周。

以上方法都可以实现你要的留空白需求，如有帮助，请给个采纳~

你只需要在遮罩层里写个div给它的背景设置成白色即可

默认插槽嵌入内容

<van-overlay :show="show" @click="show = false">
  <div class="wrapper" @click.stop>
    <div class="block" />
  </div>
</van-overlay>

<style>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
</style>

参考：https://vant-contrib.gitee.io/vant/#/zh-CN/overlay

1

把引导写在遮罩层上面