vue 弹出遮罩层样式实例

(编辑:jimmy 日期: 2025/3/16 浏览:2)

以前做遮罩层都是写最小高度来占满屏,但是总会出现问题,也没改变,今天一个人在交流群上问这个时,看到一个回答解决了我这一个bug,学到了,现在记录一下样式。

<div class='popContainer'></div>

div.popContainer{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
}

这样遮罩层就会占满屏了

补充知识:vue 锁定蒙版 不让里面页面滑动

其实就是一句代码,在你的蒙版里面添加一句@touchmove.prevent就好了,下面是例子

<!-- 阴影背景层 --> <div class="layout" @touchmove.prevent :style="{'display':flag" @click="closeAction"></div>

以上这篇vue 弹出遮罩层样式实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

一句话新闻

Windows上运行安卓你用过了吗
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。