vue 多个组件中同时使用window.onresize时，只有一个组件起作用时的解决办法

₍•ʚ•₎呀呀

已于 2023-06-13 10:24:00 修改

阅读量915

点赞数 2

文章标签： vue.js javascript ecmascript

于 2023-06-13 10:22:54 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_60886885/article/details/131182869

版权

博客提到在使用Echarts时，若多个图表子组件都使用window.onresize，会出现只有一个组件生效的问题，解决办法是将所有子组件使用onResize()的地方进行修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将 window.onresize 替换成


window.addEventListener('resize', () => { })

例如:在使用Echarts的时候可能需要多个图表子组件但是每个组件都使用了window.onresize时，那么就会存在只有一个组件生效的问题,只需要将所有子组件使用onResize()的地方修改了即可

//原来
  window.onresize = function () {
    middleChart1.resize()
    middleChart2.resize()
    middleChart3.resize()
    middleChart4.resize()
    middleChart5.resize()
    middleChart6.resize()
   }
//修改后  
window.addEventListener('resize', () => {
    middleChart1.resize()
    middleChart2.resize()
    middleChart3.resize()
    middleChart4.resize()
    middleChart5.resize()
    middleChart6.resize()
   })