在VueJs中如何監聽window.resize具體該怎麼實現？

本篇文章主要介紹了VueJs監聽window.resize方法範例，現在分享給大家，也給大家做個參考。

Vuejs 本身就是一個 MVVM 的框架。

但是在監聽 window 上的 事件 時，往往會顯得 力不從心。

例如 這次是 window.resize

恩，我做之前也是百度了一下。看到大傢伙都為這個問題煩惱。

問題： 今天我也 遇到了這樣一個問題， 是關於canvas 自適應。根據視窗的變化去變化canvas 的寬度

備註： 重要的問題說三遍解決框架內的bug 先說框架版本版本版本（這裡用的Vue 2.x 、ES6）

#解決方案：

第一步： 先在data 中去定義一個記錄寬度是屬性

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

第二步： 我們需要講reisze 事件在vue mounted 的時候去掛載一下它的方法

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

第三步： watch 去監聽這個屬性值的變化，如果發生變化則講這個val 傳遞給this.screenWidth

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

第四步：優化因為頻繁觸發resize 函數，導致頁面很卡的問題

  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中如何實現滑鼠響應式淘寶動畫效果

如何使用jQuery實現滑鼠響應式透明度漸變動畫效果

在JavaScript中如何判斷NaN

#在nodejs環境下微信掃碼支付功能如何實現？

使用Vue實作底層原理（詳細教學）

#在js中如何實作控製檔拖曳並取得拖曳內容功能

以上是在VueJs中如何監聽window.resize具體該怎麼實現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！