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

背景：在移动端开发中，使用了mint-ui组件库，其中，使用组件popup组件和datetime-picker组件存在滚动性穿透问题。

一、问题原因

• HTML5触摸事件touchmove事件：当手指在屏幕上滑动的时候会连续触发；
• 所以，当激发出组件popup组件和datetime-picker的弹出层时，我们在弹出层选择内容时，上下连续滑动是会触发该事件的。

二、解决思路

• 在弹出层出现之后阻止body的touchmove事件，在弹出层消失之后，移除阻止事件。

三、例外

       然而，Datetime-picker组件使用这个方法没用。由于Datetime-picker组件没有提供弹框显示和隐藏的绑定变量，所以，我们无采用解决popup的方式来解决问题，只能通过打开事件，确认事件，取消事件，点击事件，点击蒙层弹框消失这几个时间点去解决。官方给出的属性方法只支持确认事件，打开事件。没有明文给出取消事件的回调函数，更不支持点击蒙层弹框消失事件。

     最后，根据各方搜索，发现网友提供了一种简便方法，一行代码就解决问题了，实测有用，在此记录一下。

@touchmove.native.stop.prevent

<mt-datetime-picker
ref="picker3"
v-model="defaultBirthDayBBREnd"
type="date"
year-format="{value}年"
month-format="{value}月"
date-format="{value}日"
:startDate="startDateVperiod"
:endDate="new Date()"
@confirm="handleConfirm"
@touchmove.native.stop.prevent
>
</mt-datetime-picker>

参考博客：【Vue2.0】 mint-ui解决移动端picker和datetime picker穿透滚动问题  https://blog.csdn.net/amyleeYMY/article/details/82588477?utm_source=blogxgwz1

                    datetime-picker事件穿透问题解决一劳永逸   https://blog.csdn.net/web_xiaolei/article/details/102740789

                    Mint-ui 框架Popup和Datetime Picker组件滚动穿透解决方式    https://blog.csdn.net/u012374026/article/details/83822231