VueJs監(jiān)聽(tīng)window.resize方法示例

發(fā)布時(shí)間：2020-09-25 00:45:17 來(lái)源：腳本之家閱讀：166 作者：ailongyang 欄目：web開(kāi)發(fā)

Vuejs 本身就是一個(gè) MVVM 的框架。

但是在監(jiān)聽(tīng) window 上的事件時(shí)，往往會(huì)顯得力不從心。

比如這次是 window.resize

恩，我做之前也是百度了一下?？吹酱蠹一锒紴檫@個(gè)問(wèn)題而發(fā)愁。

問(wèn)題：今天我也遇到了這樣一個(gè)問(wèn)題，是關(guān)于canvas 自適應(yīng)。根據(jù)窗口的變化去變化 canvas 的寬度

備注：重要的問(wèn)題說(shuō)三遍解決框架內(nèi)的bug 先說(shuō) 框架版本版本版本（這里用的 Vue 2.x 、ES6）

解決方案：

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

data: {
 screenWidth: document.body.clientWidth // 這里是給到了一個(gè)默認(rèn)值 （這個(gè)很重要）
}

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

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

第三步： watch 去監(jiān)聽(tīng)這個(gè) 屬性值的變化，如果發(fā)生變化則講這個(gè)val 傳遞給 this.screenWidth

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

第四步：優(yōu)化因?yàn)?頻繁觸發(fā) resize 函數(shù)，導(dǎo)致頁(yè)面很卡的問(wèn)題

  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)
    }
   }
  }

最后一步：去看看你想要的結(jié)果吧~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

VueJs監(jiān)聽(tīng)window.resize方法示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽