网络编程 
首页 > 网络编程 > 浏览文章

vue 弹出遮罩层样式实例

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

以前做遮罩层都是写最小高度来占满屏,但是总会出现问题,也没改变,今天一个人在交流群上问这个时,看到一个回答解决了我这一个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 弹出遮罩层样式实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

上一篇:在vue中实现禁止屏幕滚动,禁止屏幕滑动
下一篇:vue中解决拖拽改变存在iframe的div大小时卡顿问题
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?