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

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

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

我看了下源码，发现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 方法。

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

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

猜你喜欢