Vue2.0-mint-ui解决移动端苹果手机有滚动穿透的问题

1.遇到的问题：使用mint-ui的弹窗选择时底部页面会出现滚动效果（仅出现在苹果手机，安卓手机，pc端正常）

2.问题原因：滚动穿透，这是啥，我也不懂

3.解决方式：参考文档，了解下：https://blog.csdn.net/weixin_40126227/article/details/80858990

思路就是弹出层打开的时候禁止body的滑动事件，弹出层关闭恢复body的滑动事件

由于使用的是Vue2.0，所以修改了语法，详见代码

首先，在data内定义一个函数和定义添加touchmove监听和移除的方法

//Vue数据变量区域
data(){
/*---------监听函数--------------*/
    handler:function(e){e.preventDefault();},
...
},
//Vue函数方法区域
methods:{
    /*解决iphone页面层级相互影响滑动的问题*/
    closeTouch:function(){
        document.getElementsByTagName("body")[0].addEventListener('touchmove',
            this.handler,{passive:false});//阻止默认事件
        console.log("closeTouch haved happened.");
    },
    openTouch:function(){
        document.getElementsByTagName("body")[0].removeEventListener('touchmove',
            this.handler,{passive:false});//打开默认事件
        console.log("openTouch haved happened.");
    },
    ...
}

其次，在打开弹出窗口时调用closeTouch方法，关闭弹出窗口时调用openTouch方法

以下为popup的处理：

//侦听属性
watch:{
    signReasonVisible:function(newvs,oldvs){//picker关闭没有回调函数，所以侦听该属性替代
        if(newvs){
            this.closeTouch();
        }else{
            this.openTouch();
        }
    }
},

以下为datetime-picker的处理：

//Vue函数方法
methods:{
/*----------------弹窗类----------------------*/
    openPicker1(index){//打开时间选择器
        this.$refs.picker1.open();
        this.closeTouch();//关闭默认事件
    },
    setTime(value){//时间赋值
        this.openTouch();//打开默认事件
      },
    ...
}