Vue-scroller页面input框不能触发滑动 使用Vue-scroller页面input框不能触发滑动的问题及解决办法

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

Vue-scroller页面input框不能触发滑动 使用Vue-scroller页面input框不能触发滑动的问题及解决办法

Brother斌   2021-02-02 我要评论
想了解使用Vue-scroller页面input框不能触发滑动的问题及解决办法的相关内容吗,Brother斌在本文为您仔细讲解Vue-scroller页面input框不能触发滑动的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue,scroller页面input框不能触发滑动,Vue,scroller触发滑动,下面大家一起来学习吧。

因为项目中有个填写信息的页面,有很多input框,引入vue-scroller后发现在input区域滑动失效;看了一下引入的vue-scroller组件里的源码,发现在组件源码里的Scroller.vue中在touchStart、touchMove和mouseDownd方法的时候被return了

touchStart(e) {
   // Don't react if initial down happens on a form element
   //注释掉这段代码就行
   // if (e.target.tagName.match(/input|textarea|select/i)) {
   //  return
   // }
   //注释掉这段代码就行
   if (e.target.tagName.match(/textarea|select/i)) {
    return;
   }
   this.scroller.doTouchStart(e.touches, e.timeStamp);
  },
   touchMove(e) {
   //touchMove也要重新加个判断,否则input框不能左右滑动
   if (!e.target.tagName.match(/input/i)) {
    e.preventDefault();
   }
   this.scroller.doTouchMove(e.touches, e.timeStamp);
  },

  mouseDown(e) {
   // Don't react if initial down happens on a form element
   //注释掉这段代码就行
   // if (e.target.tagName.match(/input|textarea|select/i)) {
   //  return
   // }
   //注释掉这段代码就行
   if (e.target.tagName.match(/textarea|select/i)) {
    return;
   }
   this.scroller.doTouchStart(
    [
     {
      pageX: e.pageX,
      pageY: e.pageY
     }
    ],
    e.timeStamp
   );
   this.mousedown = true;
  },

具体我也不知道阻止滑动input框区域是为了防止什么Bug,有知道的可以在评论区说一下;最后因为vue-scroller是npm引入的方式,怕会被更新掉,所以直接把组件代码copy出来放在项目的components目录下引用了

在这里插入图片描述

main.js引入方式和插件类似,使用方式和官方一样

在这里插入图片描述

猜您喜欢

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们