为了实现页面的宽度和高度自适应，有时候我们需要根据窗口的变化去改变页内元素的宽高，而 VUE 作为一款轻量级的 MVVM 框架，在监听和处理 BOM 事件时需要在指定的区域进行处理，这里记录两种常用而且比较简单的方法。
方案一：
1.在 data 中去 定义 一个记录宽度是 属性
data: {
return {
screenWidth: document.body.clientWidth // 设置默认值
}
}
2.在 vue mounted 的时候 去挂载一下 window.onresize 方法
mounted () {
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
}
3.watch 去监听这个 属性值的变化，如果发生变化则讲这个 val 传递给 this.screenWidth
watch: {
screenWidth (val) {
this.screenWidth = val
}
}
4.优化因为频繁触 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)
}
}
}
方案二(推荐使用):
原理：在 mounted 钩子中 全局监听 resize 事件，然后绑定的函数再做具体的处理。
data(){
return {
clientHeight: document.body.clientHeight,
},
},
mounted() {
// 在DOM渲染数据时，设置下区域高度为浏览器可视区域高度．
this.clientHeight = document.body.clientHeight;
// 监听window的resize事件．在浏览器窗口变化时再设置下区域高度．
const _this = this;
window.onresize = function temp() {
_this.clientHeight = document.body.clientHeight;
};
},