MINT-UI中如何让遮罩层弹出后,阻止页面滚动?

Question

在MINT-UI中,类似Popup等组件,当遮罩层弹出后需要阻止页面BODY的滚动,如何设定呢?没有找到相应的API想通过监听遮罩层弹出关闭事件来实现,遮罩层关闭的事件在哪里可以监听呢?查询源码后,发现类似lockScroll的选项,但是没有找到暴露的接口,这个设置项该如何设定才能生效?

Answer 1

监听v-model绑定的popupVisible,为true的时候，获取当前页面的外层div，设置其样式属性,height:100%;overflow:hidden;popupVisible为false时候，设置外层div height:'',overflow:‘’不理解可以沟通，个人有篇文章里面也提到了这个问题

Answer 2

<mt-popup position="right"

       v-model="popupVisible"

       pop-transition="popup-fade">

<div class="overlayer" @touchmove.prevent >

....

</div>

</mt-popup>

/遮罩层/

.overlayer{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

z-index:10;

}

这样可以组织蒙层弹出时，还能滑动body的问题，但是鼠标滑轮依然可以。