VueJs에서 window.resize를 모니터링하는 방법과 이를 구체적으로 구현하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-06-11 16:22:40

원래의

2823명이 탐색했습니다.

이 글에서는 주로 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)
    }
   }
  }

로그인 후 복사

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