根据窗口变化,改变页面展示需求还是很常见(如图片自适应、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表示的是函数的引用
二、注意事项
1、window.onresize与window.removeEventListener绑定相同的事件,都会触发;
2、window.onresize 不能重复绑定事件,只有最后绑定的事件生效;
window.removeEventListener('resize', reportWindowSize)可以重复绑定事件,当窗口改变后,所有绑定的事件都会触发。
3、注意防抖
4、谷歌bug会触发两次窗口变化事件,用防抖可解决该问题
// 注册事件 -- 防抖
window.onresize = () => {
if (!this.bAntiShike) {
this.bAntiShike = true
setTimeout(() => {
this.resizeHandler()
this.bAntiShike = false
}, 300)
}
}
// 下面两个事件都会触发
window.addEventListener('resize', this.testN)
window.addEventListener('resize', this.testNN)