mint-ui 自定义popup内部有滚动,滚动穿透问题

本文只针对弹出层内部还有滚动,而且用的是popup组件的问题

可以先看下这个文章 https://blog.csdn.net/weixin_30387423/article/details/94804528

由于mt-popup组件没有暴露cancel事件,所以我第一事件是想着去改源码,暴露一个cancel事件,后来发现本地改了并没有什么用...到时候打包拉的还是git上的mint-ui..

后来发现v-model绑定的显示状态在取消的时候会直接被组件更改,然后可以直接监听这个属性,从而解决穿透问题

// 解决穿透问题的方法

const ModalHelper = (function(bodyCls){

      var scrollTop;

      return{

          afterOpen:function(){

              scrollTop = document.scrollingElement.scrollTop;

              document.body.classList.add(bodyCls);

              document.body.style.top = -scrollTop+'px';

          },

          beforeClose:function(){

              document.body.classList.remove(bodyCls);

              document.scrollingElement.scrollTop = scrollTop;

          }

      }

  })('modal-open');

// 样式