根据窗口变化,改变页面展示需求还是很常见(如图片自适应、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表示的是函数的引用