VueJs에서 window.resize를 모니터링하는 방법과 이를 구체적으로 구현하는 방법은 무엇입니까?

이 글에서는 주로 VueJs 모니터링 window.resize 방법의 예시를 소개하고 있으니 참고용으로 올려보겠습니다.

Vuejs 자체는 MVVM 프레임워크입니다.

하지만 창에서 이벤트를 모니터링할 때 무력해 보일 때가 많습니다.

예를 들어 이번에는 window.resize였습니다

글쎄요, 저도 하기 전에 바이두에서 검색을 해봤는데요. 모두가 이 문제에 대해 걱정하고 있는 것 같아요.

질문: 저도 오늘 캔버스 적응과 관련된 문제에 직면했습니다. 창의 변화에 ​​따라 캔버스의 너비를 변경합니다

Remarks: 프레임워크의 버그를 해결하기 위해 중요한 문제에 대해 세 번 이야기해 보겠습니다. 먼저 프레임워크 버전에 대해 이야기하겠습니다(여기서는 Vue 2.x, ES6 사용).

해결책:

첫 번째 단계: 먼저 레코드 너비를 데이터의 속성으로 정의합니다.

data: {
 screenWidth: document.body.clientWidth // 这里是给到了一个默认值 （这个很重要）
}

2단계: vue 마운트 시 reisze 이벤트를 마운트하는 방법에 대해 이야기해야 합니다.

  mounted () {
   const that = this
   window.onresize = () => {
    return (() => {
     window.screenWidth = document.body.clientWidth
     that.screenWidth = window.screenWidth
    })()
   }
  }

3단계: 이 속성을 모니터링하는 것을 지켜보세요. 값이 변경되면 이 값을 this.screenWidth에 전달하세요

  watch: {
   screenWidth (val) {
    this.screenWidth = val
   }
  }

4단계: 크기 조정 기능의 빈번한 실행으로 인해 페이지가 멈추는 문제 최적화

  watch: {
   screenWidth (val) {
    if (!this.timer) {
     this.screenWidth = val
     this.timer = true
     let that = this
     setTimeout(function () {
      // that.screenWidth = that.$store.state.canvasWidth
      console.log(that.screenWidth)
      that.init()
      that.timer = false
     }, 400)
    }
   }
  }

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로는 더 나아질 거예요. 모두가 도움이 됩니다.

관련 기사:

jQuery에서 마우스 반응형 Taobao 애니메이션 효과를 구현하는 방법

jQuery를 사용하여 마우스 반응형 투명도 그라데이션 애니메이션 효과를 구현하는 방법

JavaScript에서 NaN을 판단하는 방법

nodejs 환경에서 WeChat 코드 스캐닝 결제 기능을 구현하는 방법은 무엇입니까?

Vue를 사용하여 기본 원칙 구현(자세한 튜토리얼)

파일 드래그를 제어하고 js에서 콘텐츠 드래그 기능을 얻는 방법

위 내용은 VueJs에서 window.resize를 모니터링하는 방법과 이를 구체적으로 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!