首页 > Vue >

elementUI的加载遮罩v-loading有滚动条时不能全遮住的问题

时间: 作者:admin 浏览:

在项目中vue+elementUI,在某div标签上使用v-loading加载遮罩时,发现如果这个div标签内容超出有滚动条时(overflow:auto),如果先将内容滚动一段距离之后再弹出v-loading遮罩,遮罩会不能全部盖住整个div内容,遮罩的起点位置是滚动内容最顶部,但是却没有从头罩到尾,下面有一大段没遮住,很奇怪,div的display属性没改,默认的block,看了v-loading遮罩的css定位也没问题:

position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

使用v-loading遮罩的div标签也有属性position:relative;,宽高也有,找不出哪里有问题,平常用v-loading也没什么问题,于是去看了好多没问题的v-loading案例,尝试了一下,发现只需要将使用v-loading的div的display属性值改为:

display: table;

就能解决问题,其他一句没多加,就是改了这个属性,就再也不出现这个问题了,删了这个属性设置,马上就出现上面描述的问题,滚动了以后遮不住全部;
反复测试,确实有效,哈哈,如果你也遇到过这个问题,快去试试吧;

微信公众号
微信公众号:
  • 前端全栈之路(微信群)
前端QQ交流群
前端QQ交流群:
  • 794324979
  • 734802480(已满)

更多文章

栏目文章


Copyright © 2014-2023 seozhijia.net 版权所有-粤ICP备13087626号-4