Mint-ui 框架Popup和Datetime Picker组件滚动穿透解决方式

在移动端开发中使用到了Mint-ui组件库，其中有两个组件Popup组件和Datetime Picker存在滚动性穿透问题，官方文档最新版并没有解决这个问题。

现象还原

• 官方地址https://mint-ui.github.io/#!/zh-cn
• 手机扫码查看demo，查看两个组件Popup组件和Datetime的例子演示。

问题原因

• HTML5触摸事件touchmove事件：当手指在屏幕上滑动的时候连续地触发
• 所以当激活出组件Popup组件和Datetime Picker的弹出层时，我们在弹层选择内容时上下连续滑动是会触发该事件

解决思路

• 在弹出层出现之后阻止body的touchmove事件，在弹层消失之后移除阻止事件

使用mint-ui组件库的解决方式

Popup组件

// 官方实例

<mt-popup
  v-model="popupVisible"
  position="bottom">
  ...
</mt-popup>

// 解决方式，通过监听popupVisible变量,在弹窗出现后禁止bode节点touchMove事件，弹窗消失后恢复body节点的touchMove事件

const handler = function(e) {
    e.preventDefault();
}

// vue实例内
watch: {
    popupVisible: function (val) {
      if(val) {
          document.g