【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

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI是一个基于Vue.js的UI组件库,用于快速构建Web界面。要在Vue项目中使用Element UI,需要进行以下步骤: 1. 在项目的main.js文件中添加以下代码: ```javascript import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 这将引入Element UI组件库并注册为全局组件。 2. 确保你已经安装了Element UI依赖。可以通过在终端中运行以下命令来安装: ``` npm install element-ui --save ``` 这将在你的项目中安装Element UI。 3. 在需要使用Element UI组件的地方,可以直接在Vue组件中引入所需的组件。例如,在一个Vue组件中使用Button组件: ```javascript <template> <div> <el-button>按钮</el-button> </div> </template> <script> import { Button } from 'element-ui' export default { components: { 'el-button': Button } } </script> ``` 这样就可以在Vue项目中使用Element UI组件了。记得在需要使用的组件前加上"el-"前缀。 请注意,以上引用的内容是针对Vue 2.0版本和Element UI的使用。如果你使用的是其他版本,请参考相应的文档。 #### 引用[.reference_title] - *1* [Vue2.0中Element UI的使用](https://blog.csdn.net/qq_46233520/article/details/122690258)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue2.0项目引入element-ui](https://blog.csdn.net/weixin_33905756/article/details/88986106)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue2.0安装Element-ui](https://blog.csdn.net/m0_59511468/article/details/124886095)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值