【Vue2.0】 mint-ui解决移动端picker和datetime picker穿透滚动问题

在使用mint-ui的弹窗时，滚动弹窗内部分区域，会导致页面滚动。

我测试的时候是安卓和ios使用picker时都有这个问题；使用datetime picker时只有ios会出现这个问题。

我看了下源码，发现datetime picker的弹窗是引用的picker的组件，emmmm...，有点奇怪同一个组件在安卓上显示还不一样。

那我们先来看下解决办法吧，解决办法主要参考这里：

思路很简单，就是弹出层打开时禁止body的滚动事件，弹出层关闭时恢复body的滚动事件

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

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

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

这样就解决了使用picker时穿透滚动的问题。

 

但是datetime picker呢，datetime picker不能监听属性判断窗口是否关闭，没有这个属性暴露出来，我们看看官方文档：

是不是想到了在打开时间选择器和点击确定confirm时做这两个事情。但是我们又会发现其他的问题，关闭弹出层不止有确定confirm一个操作能实现，点击蒙版层区域和点击取消也能关闭弹出层。但是api里并没有给出 控制是否能点击蒙版层区域关闭窗口的属性 和 取消事件。

那我们再去看下源码：

发现了这个！！！其实是有控制是否能点击蒙版层区域关闭窗口的属性的，只不过官方文档没写出来。因为点击蒙版层关闭弹出层我们捕捉不到这个变化，所以这里我们把它设置成false。

我们继续看看：

也是有取消事件的！ 那我们现在在点击cancel事件和confirm事件上都加上 openTouch 方法，在控制打开时间选择器的地方加上 closeTouch 方法。

这样我们的问题就解决啦(*^▽^*)。 想偷偷吐槽下官方文档写的太简洁了吧，省略了好多东西。