vue中使用mint-ui的mt-popup出现滚动穿透问题解决方法

一、如果popup内部不需要滑动：
防止滚动穿透 只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件

<mt-popup
      v-model="popupSCVisible"
      position="bottom"
      model="true"
      closeOnClickModal="true"
      @touchmove.native.stop.prevent  //防止滚动穿透
      >

但是：
vue的 @touchmove.prevent 可以用来阻止滑动，但是同时会禁止蒙层内的子元素的滑动事件，如果蒙层内子元素没有中间滑动需求（如只有点击需求），就可以用 @touchmove.prevent 实现阻止蒙层滑动穿透问题。

二、如果popup内部有滑动需求：

最近做的项目中用到了mint-popup，项目需求需要在popup中添加一个可以下拉的列表。可是下拉弹窗列表的同时，会穿透导致body跟着下拉。为了解决这种问题尝试了很多办法比如：overflow: hidden， height：100% @touchmove.native.stop.prevent
watch监听v-modal、 e.preventDefault()等都没能解决，不过功夫不负有心人终于找到解决办法，以下为解决办法：

那么只需要在body或者父级div设置fixed属性即可。

body {
    position: fixed; 
    left: 0;
    top: 0;
  }

三、

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

<mt-popup
      v-model="popupTopVisible"
      position="top"
      model="true"
      closeOnClickModal="true"
      >

data(){
	popupTopVisible: false,
	handle: function(e){
            e.preventDefault()
        },
},

watch:{
	popupTopVisible(value) {
      if(value) {
        this.closeTouch ()
      }else{
        this.openTouch ()
      }
    },
}

methods: {
	closeTouch () {
          document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive:false})//阻止默认事件
      },
      openTouch () {
          document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive:false})//打开默认事件
      },
 }

四、
Datetime Picker：

<mt-datetime-picker
    ref="picker"
    type="time"
    v-model="pickerValue"
    @touchmove.native.stop.prevent>
</mt-datetime-picker>

对于时间组件加了@touchmove.native.stop.prevent，选择时间滚动的时候底部页面就不会跟着滚动了。