根据窗口变化，改变页面展示需求还是很常见（如图片自适应、echarts自适应问题），以在vue中的使用举例
方法一：使用window的onresize属性 -- window.onresize = reportWindowSize
1、mounted注册事件
mounted() {
// 注册事件 -- 防抖
window.onresize = () => {
if (!this.bAntiShike) {
this.bAntiShike = true
setTimeout(() => {
this.getWidth()
this.bAntiShike = false
}, 300)
}
}
}
2、beforeDestroy注销事件
beforeDestroy() {
// 事件注销
window.onresize = null
}
方法二：将视图事件resize注册到window进行监听 -- window.addEventListener(‘resize‘, reportWindowSize);
1、mounted注册事件
mounted() {
// 注册事件 --onWindowResize中做防抖处理，同window.onresize
window.addEventListener(‘resize‘, this.onWindowResize)
}
2、beforeDestroy注销事件
beforeDestroy() {
// 事件注销
window.removeEventListener(‘resize‘, this.onWindowResize)
}
注：参数reportWindowSize表示的是函数的引用
原文：https://www.cnblogs.com/zkpThink/p/13396309.html