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)
}
}
}
最后一步： 去看看你想要的結果吧~
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
