vue mintui 탄창 튀어나오기, 밑에 페이지 스크롤 버그 문제 해결

dom 층층이 주석을 통해 피드백을 축소하여 마침내 문제의 소재를 찾았다.
문제 경과
나는 탄창을 켤 때 팝업 Visible를 true로 설정했다
그리고 vue의 업데이트 생명주기 갈고리 함수를 터치했습니다.
그리고 이 함수에서this.$를 했습니다.refs.container.offsetHeight로 인해 시트 다시 그리기
그러면 아래쪽 페이지가 위로 스크롤됩니다.
해결 방법
업데이트 함수 안의 다시 그리는 방법을 없애다
보충 지식: 프로젝트 총결 vue에서mint-ui를 사용하는 mt-popup에 대한 롤러 관통 문제 해결 총결
솔직히 말해서 Mint-ui라는 ui 구성 요소를 사용하는 과정에서 많은 문제가 발생했습니다. 이 ui 구성 요소는 문제가 정말 많습니다.
오늘의 주제를 먼저 말씀드리겠습니다. 제가 팝업 선택 상자를 사용할 때와datepicker 시간 선택기를 사용할 때 스크롤이 뚫리는 문제가 발생했습니다. 특히ios 위에 있습니다.
여러 가지 방법을 찾았는데 결국 동료가 좋은 방법을 제시했고 간결해서 정리하려고 했다.
스크롤 관통을 방지하려면 @touchmove를 추가하십시오.native.stop.prevent 기본 루트 요소의 기본 이벤트를 막으면 됩니다.native가 관건입니다. 이것은 루트 요소의 뜻, 즉 body 또는 html
코드는 다음과 같습니다.
Popup 구성 요소:

<mt-popup
     v-model="popupVisible"
     position="bottom">
     ...
  </mt-popup>
  //    @touchmove.native.stop.prevent  native ， ， body html
  <mt-popup
   v-model="popupVisible"
   position="bottom"
   @touchmove.native.stop.prevent>
   ...
  </mt-popup>

mt-popup에 div 등자 요소가 있을 때 주의해야 합니다. 이때 문제가 있을 수 있습니다. mt-popup이라는 요소도 굴러갈 수 없는 상황이 발생할 수 있습니다. 그래서 mt-popup 자체가 굴러갈 필요가 없다면 @touchmove를 추가했습니다.native.stop.prevent, 밑에 있는 페이지가 따라 미끄러지지 않습니다. 만약에 mt-popup에 스크롤 바가 있으면 스크롤을 할 수 없습니다. 이럴 때 일반적인 방법을 취해야 합니다. 아래와 같습니다.
//해결 방식, popupVisible 변수를 감청함으로써 탄창이 나타난 후 body 노드 touchMove 이벤트를 금지하고, 탄창이 사라진 후 body 노드를 복구하는 touchMove 이벤트

 //html  
   <mt-popup
     v-model="popupVisible"
     position="bottom">
     ...
   </mt-popup>
  // js  
  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].removeEventListener('touchmove', this.handler, { passive: false });
     }
    }
  }

Datetime Picker:

 <mt-datetime-picker
    ref="picker"
    type="time"
    v-model="pickerValue"
    @touchmove.native.stop.prevent>
 </mt-datetime-picker>

시간 구성 요소에 @touchmove를 추가했습니다.native.stop.prevent, 시간 스크롤을 선택할 때 밑에 있는 페이지가 스크롤되지 않습니다. 완벽합니다.
@touchmove.native.stop.prevent는 우리로 하여금 많은 일을 절약하게 할 수 있으니, 써라!
이상의 이 vue는mintui탄창을 해결하고 밑부분의 스크롤 버그 문제는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.