vue picker阻止穿透滚动

在开发vue项目我用到了mint-ui框架,使用picker组件在手机上滑动的时候,body页面也跟着一起滑动
解决的思路: 就是弹出层打开时禁止body的滚动事件，弹出层关闭时恢复body的滚动事件,通过监听popupGender变量,在弹窗出现后禁止body节点touchMove事件

<mt-popup v-model="popupGender" position="bottom">
	<mt-picker :slots="gender" showToolbar value-key="sex" :itemHeight='60' @change="onGenderChange">
		<div class="picker-btn flex-bet">
			<div class="cancel" @click="genderCancel">取消</div>
			<div class="determine" @click="genderDetermine">确定</div>
		</div>
	</mt-picker>
</mt-popup>

//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: {
    //关闭没有回调函数，所以侦听该属性替代
    popupGender(val){
        if(val) {
            this.closeTouch()
        } else {
            this.openTouch()
        }
    }
}

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

但是datetime picker呢，datetime picker不能监听属性判断窗口是否关闭，没有这个属性暴露出来

//防止滚动穿透 只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件就可以了，native是关键，这个表示根元素的意思，也就是body或者html
<mt-datetime-picker
    ref="picker"
    type="time"
    v-model="pickerValue"
    @touchmove.native.stop.prevent>
</mt-datetime-picker>

<mt-popup
  v-model="popupVisible"
  position="bottom"
  @touchmove.native.stop.prevent>
  ...
</mt-popup>

注意: 当mt-popup中还有div等子元素的时候，一定要注意，这个时候可能会有一些问题，会出现mt-popup这个元素也滚动不了的情况，所以说如果mt-popup本身不需要滚动的话，加了@touchmove.native.stop.prevent，底部页面就不会跟着滑动，如果mt-popup里面有滚动条需要滚动的话，可能就滚动不了