Vue-scroller 페이지 input 상 자 를 사용 하면 미 끄 러 지 는 문제 와 해결 방법 을 촉발 할 수 없습니다.

항목 에 정 보 를 작성 하 는 페이지 가 있 기 때문에 input 상자 가 많 습 니 다.vue-scroller 를 도입 한 후에 input 구역 에서 미 끄 러 지 는 것 이 실 효 됩 니 다.도 입 된 vue-scroller 구성 요소 의 원본 코드 를 보 니 구성 요소 원본 코드 에 있 는 Scroller.vue 에서 touch Start,touch Move,mouse Downd 방법 에서 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 상자 구역 이 어떤 버그 를 방지 하기 위 한 것 인지 모 르 겠 습 니 다.아 는 것 이 있 으 면 댓 글로 말씀 해 주세요.마지막 으로 vue-scroller 는 npm 도입 방식 으로 업데이트 될 까 봐 구성 요소 코드 copy 를 프로젝트 의 components 디 렉 터 리 에 직접 참조 하 였 습 니 다.
在这里插入图片描述
main.js 도입 방식 은 플러그 인과 유사 하 며,사용 방식 은 공식 과 같 습 니 다.
在这里插入图片描述
Vue-scroller 페이지 input 상 자 를 사용 하여 미끄럼 을 일 으 키 지 못 하 는 문제 와 해결 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue-scroller 페이지 input 상 자 는 미끄럼 을 일 으 키 지 못 합 니 다.이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!

좋은 웹페이지 즐겨찾기