建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)VUE監(jiān)聽窗口變化事件的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
Vuejs 本身就是一個 MVVM 的框架。但是在監(jiān)聽 window 上的 事件 時，往往會顯得 力不從心。
比如 這次是 window.resize恩，我做之前也是百度了一下?？吹酱蠹一锒紴檫@個問題而發(fā)愁。
問題： 今天我也 遇到了這樣一個問題， 是關(guān)于canvas 自適應(yīng)。 根據(jù)窗口的變化去變化 canvas 的寬度備注： 重要的問題說三遍 解決 框架內(nèi)的bug 先說 框架 版本 版本 版本 （這里用的 Vue 2.x 、ES6）
解決方案：
第一步： 先在 data 中去 定義 一個記錄寬度是 屬性
data: {
screenWidth: document.body.clientWidth // 這里是給到了一個默認(rèn)值 （這個很重要）
}第二步： 我們需要 講 reisze 事件在 vue mounted 的時候 去掛載一下它的方法
mounted () {
const that = this window.onresize = function() {
return function(){
window.screenWidth = document.body.clientWidth;
that.screenWidth = window.screenWidth
})()
}
}第三步： watch 去監(jiān)聽這個 屬性值的變化，如果發(fā)生變化則講這個val 傳遞給this.screenWidth
watch: {
screenWidth (val) {
this.screenWidth = val
}
}第四步：優(yōu)化 因?yàn)?頻繁 觸發(fā) resize 函數(shù)，導(dǎo)致頁面很卡的 問題
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é)果吧~
關(guān)于“VUE監(jiān)聽窗口變化事件的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
文章題目：VUE監(jiān)聽窗口變化事件的示例分析-創(chuàng)新互聯(lián)
鏈接URL：http://www.dlmjj.cn/article/dojeei.html
