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

Question

在MINT-UI中,类似Popup等组件,当遮罩层弹出后
需要阻止页面BODY的滚动,如何设定呢?没有找到相应的API

想通过监听遮罩层弹出关闭事件来实现,遮罩层关闭的事件在哪里可以监听呢?

查询源码后,发现类似lockScroll的选项,但是没有找到暴露的接口,这个设置项该如何设定才能生效?

Answer 1

Answer 2

哥们找到方法了吗？我也遇到这个问题了

Answer 3

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

Answer 4

<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的问题，但是鼠标滑轮依然可以。

Answer 5

    <div @touchmove.prevent>
       <mt-popup
           class="my-num-box"
           :closeOnClickModal="false"
           v-model="showMyNum">
    
           <h3>我的抽奖号码</h3>
           <ul>
              <li v-for="(item, index) in myNumList" :key="index">{{item}}</li>
           </ul>
           <footer @click="showMyNum = false">我知道了</footer>
    
      </mt-popup>
  </div>
  
  
  外层添加一层div，加上 @touchmove.prevent

Answer 6

<mt-popup :lockScroll='true'>
<div @touchmove.prevent >内容</div>
</mt-popup>

:lockScroll='true' 阻止body页面可以通过鼠标滚轮滚动
@touchmove.prevent
popup弹窗后，阻止在其窗口中点击拖动body页面