解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题

更新时间：2020年11月04日 11:35:04 作者：Inc桂

这篇文章主要介绍了解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

在移动端开发中使用到了Mint-ui组件库，其中有两个组件Popup组件和Datetime Picker存在滚动性穿透问题，官方文档最新版并没有解决这个问题。

现象还原

官方地址

手机扫码查看demo，查看两个组件Popup组件和Datetime的例子演示。

问题原因

HTML5触摸事件touchmove事件：当手指在屏幕上滑动的时候连续地触发

所以当激活出组件Popup组件和Datetime Picker的弹出层时，我们在弹层选择内容时上下连续滑动是会触发该事件

解决思路

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

使用mint-ui组件库的解决方式

Popup组件

// 官方实例

<mt-popup
 v-model="popupVisible"
 position="bottom">
 ...
</mt-popup>

// 解决方式，通过监听popupVisible变量,在弹窗出现后禁止bode节点touchMove事件，弹窗消失后恢复body节点的touchMove事件

const handler = function(e) {
  e.preventDefault();
}

// vue实例内
watch: {
  popupVisible: function (val) {
   if(val) {
     document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
   } else {
     document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
   }
  }
}

Datetime Picker

// 官方实例

<mt-datetime-picker
  ref="picker"
  type="time"
  v-model="pickerValue">
</mt-datetime-picker>

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

<mt-datetime-picker
  ref="picker"
  type="time"
  v-model="pickerValue"
  @confirm="confirm">
</mt-datetime-picker>

const handler = function(e) {
  e.preventDefault();
}

// vue实例内

methods: {
  openPicker() { // 打开事件
    document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
    this.$refs.picker.open();
  },
  confirm() { // 确认事件
    document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
  }
}

此时还缺一个取消回调还有蒙层点击事件，然后看源码其实mint-ui源码里是支持取消回调事件的，另外面，惊喜的是在2.0版本之后的mint-ui给Datetime picker组件新加了visible-change事件和closeOnClickModal属性（传送门），但官方文档依旧没更新出来这些属性。现在就很好的解决了上述问题。

而且有了visible-change事件就可以不用按上述思路解决了。组件部分源码如下：

props: {
  ...,
  closeOnClickModal: {
    type: Boolean,
    default: true
  }
},
watch: {
  ...,
 visible(val) {
  this.$emit('visible-change', val);
 }
},
...
<span class="mint-datetime-action mint-datetime-cancel" @click="visible = false;$emit('cancel')">{{ cancelText }}</span>

直接一个visible-change方法搞定

<mt-datetime-picker
  ref="picker"
  type="time"
  v-model="pickerValue"
  @confirm="confirm"
  @visible-change=""handleValueChange>
</mt-datetime-picker>

const handler = function(e) {
  e.preventDefault();
}

// vue实例内
methods: {
  handleValueChange: function (val) {
   if(val) {
     document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
   } else {
     document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
   }
  }
}

上面的方法已经可以解决项目遇到到的坑了，但是每个页面用到组件Popup组件和Datetime Picker都需要去加上这段代码，当页面存在多个Popup组件就需要监听多个变量。

更好的解决方式（上述方式在网上也有类似解决方式，自己补充了visible-change方案）

在项目中按上面那样解决太麻烦了，所以又想了一个体验比较好的解决方案，因为弹层的出现和消失会触发组件更新，所以想到和可以全局注册一个指令v-roll，运用指令的componentUpdated钩子来实现这个功能。代码如下

// 全局注册指令
const handler = (e) => {
 e.preventDefault();
};
Vue.directive('roll', {
 componentUpdated(el, binding) {
  if (binding.value) {
   document.getElementsByTagName('body')[0].addEventListener('touchmove', handler, { passive: false });
  } else {
   document.getElementsByTagName('body')[0].removeEventListener('touchmove', handler, { passive: false });
  }
 }
});

这样一来精简了很多代码，其他开发者用到时只需要给对应组件加一个v-roll指令即可。

// popup组件处理方式
<mt-popup
 v-model="popupVisible"
 v-roll:visible=popupVisible>
 ...
</mt-popup>

// mt-datetime-picker组件处理方式
<mt-datetime-picker 
 ref="datePicker" 
 v-model="date"
 @visible-change="handleVisibleChange"
 v-roll:visible=pVisible
 ...>
</mt-datetime-picker>
...
data: {
  pVisible: false 
},
methods: {
  handleVisibleChange (isVisible) {
    this.pVisible = isVisible;
  }
}

接着还遇到一个坑，当同一个视图页面存在多个组件Popup组件和Datetime Picker使用指令时，会集体触发指令。所以会相互覆盖，如打开A弹层，阻止页面touchMove事件，但另外一个popuu组件也触发钩子函数，又取消阻止touchMove事件，导致没效果。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。// 这里目前自己的理解是由于弹层出现和消失导致所在视图界面节点更新，所以其他节点绑定了v-roll指令的钩子也被触发了

解决方案：对于一个视图内使用多个多个组件Popup组件和Datetime Picker的，给指令传入数组类型

// 全局注册指令
const handler = (e) => {
 e.preventDefault();
};
Vue.directive('roll', {
 componentUpdated(el, binding) {
  if (binding.value instanceof Array) {
   const visible = binding.value.some(e => e); // 当视图所有控制弹层的变量存在一个是true，即可阻止touchmove事件
   if (visible) {
    document.getElementsByTagName('body')[0].addEventListener('touchmove', handler, { passive: false });
   } else {
    document.getElementsByTagName('body')[0].removeEventListener('touchmove', handler, { passive: false });
   }
  } else if (typeof binding.value === 'boolean') {
   if (binding.value) {
    document.getElementsByTagName('body')[0].addEventListener('touchmove', handler, { passive: false });
   } else {
    document.getElementsByTagName('body')[0].removeEventListener('touchmove', handler, { passive: false });
   }
  }
 }
});

// popup组件处理方式
<mt-popup
 v-model="popupVisible"
 v-roll:visible=[popupVisible, pVisible]>
 ...
</mt-popup>

// mt-datetime-picker组件处理方式
<mt-datetime-picker 
 ref="datePicker" 
 v-model="date"
 @visible-change="handleVisibleChange"
 v-roll:visible=[popupVisible, pVisible]
 ...>
</mt-datetime-picker>
...
data: {
  pVisible: false 
},
methods: {
  handleVisibleChange (isVisible) {
    this.pVisible = isVisible;
  }
}

目前mint-ui还未修复该问题，所以暂且使用上述方案解决。一开始打算改源码，但是不现实，因为以后可能需要更新mint-ui版本。大家也可以帮忙看下以上解决方式是否有坑。

补充知识：Vue中使用mint-ui的日期插件时在ios上会有滚动穿透问题

问题：在ios上选择日期上下滑动时，整个页面会跟着滚动，安卓是正常的

解决方法就是在日期弹出层出现的时候禁止页面的默认滚动机制，日期弹出层消失的时候解除禁止页面的默认滚动机制

1.调用日期组件

 <div class="datePicker" style="z-index: 9999">
   <mt-datetime-picker
    type="date"
    ref="picker"
    v-model="nowTime"
    year-format="{value} 年"
    month-format="{value} 月"
    date-format="{value} 日"
    @confirm="handleConfirm"
    :startDate="startDate"
    :endDate="endDate"
   >
   </mt-datetime-picker>
  </div>

2.设置监听函数

data () {
    return {
     birthday:"", //出生日期
     startDate: new Date('1952'),
     endDate:new Date(),
     nowTime:'1992-09-15',
    
     /*---------监听函数--------------*/
     handler:function(e){e.preventDefault();}
    }
   },
   methods:{
    /*解决iphone页面层级相互影响滑动的问题*/
    closeTouch:function(){
     document.getElementsByTagName("body")[0].addEventListener('touchmove',
      this.handler,{passive:false});//阻止默认事件
     console.log("closeTouch haved happened.");
    },
    openTouch:function(){
     document.getElementsByTagName("body")[0].removeEventListener('touchmove',
      this.handler,{passive:false});//打开默认事件
     console.log("openTouch haved happened.");
    },
 }

然后监听，弹窗出现消失的时候调用相应的方法

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

以下为datetime-picker的处理：（openPicker1为触发打开选择器的事件， handleConfirm (data)是选中日期后的回调函数）

 openPicker () {
      this.$refs.picker.open();
      this.closeTouch();//关闭默认事件
 
     },
     handleConfirm (data) {
      let date = moment(data).format('YYYY-MM-DD')
      this.birthday = date;
      this.openTouch();//打开默认事件
 
     },

然后就解决了这个问题！

以上这篇解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue中UI组件库之Vuex与虚拟服务器初识
这篇文章主要介绍了Vue中UI组件库之Vuex与虚拟服务器初识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-05-05
vue兄弟组件传递数据的实例
今天小编就为大家分享一篇vue兄弟组件传递数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
webpack项目中使用vite加速的兼容模式详解
这篇文章主要为大家介绍了webpack项目中使用vite加速的兼容模式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
VUE实现时间轴播放组件
这篇文章主要为大家详细介绍了VUE实现时间轴播放组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
结合Vue控制字符和字节的显示个数的示例
这篇文章主要介绍了结合Vue控制字符和字节的显示个数的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
手把手教你使用Vue实现弹窗效果
在vue中弹窗是常用的组件之一,可以用来展示警告、成功提示和错误信息等内容,这篇文章主要给大家介绍了关于如何使用Vue实现弹窗效果的相关资料,需要的朋友可以参考下
2024-02-02
vue中使用echarts制作圆环图的实例代码
这篇文章主要介绍了vue中使用echarts制作圆环图的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-07-07
Vue开发过程中遇到的疑惑知识点总结
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。下面这篇文章主要给大家总结了Vue在开发过程中遇到的疑惑知识点,有需要的朋友可以参考借鉴，下面来一起看看吧。
2017-01-01
vue.js中for循环如何实现异步方法同步执行
这篇文章主要介绍了vue.js中for循环如何实现异步方法同步执行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
Vue3 + CSS实现一个喷火龙动画效果
不知不觉中,2023年已然逝去了,龙年到了,所以本文小编使用Vue3 + CSS实现一个喷火龙的动画效果,文中有相关的代码示例供大家参考,具有一定的参考价值,感兴趣的同学可以自己动手尝试一下
2024-02-02