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