标签：Vue created refs onresize window 组件 resize

最近开始研究web前端开发, 使用vue3 +  ts + element plus + echarts. 使用中遇到一个问题, 多个组件在窗口大小变更时 跟随 resize的问题.

网上搜 resize基本都是 window.onresize = () => {this._resize()} 这种办法... 但是使用时发现多个组件时, 只会有一个组件能实时更新大小.

出现这个问题也很容易理解, 因为 windows.onresize是全局的, 组件内部的重置接口只有最后一个执行（created/mounted）的能生效. 

解决办法:

1、 最开始是想的有没有什么组件内部可以注册onresize事件的办法，搜了一下，貌似没有。

2、然后就只能用原始办法了。 在所有需要实现resize功能的父窗口去重载 window.onresize， 在里面是对子组件 一 一 调用各自的 onresize方法。类似如下：

父页面创建组件时定义ref：

<onlinecot ref="onlinecotins"/>
<alivecot ref="alivecotins"/>
<newcot ref="newcotins"/>

在created或者mouted里实现window.onresize

  created () {
    window.onresize = () => {
      this.$refs.onlinecotins.resize()
      this.$refs.alivecotins.resize()
      this.$refs.newcotins.resize()
    }
  }

组件内部实现 resize方法：

  methods: {
    resize () {
      mychart.resize()
    }
  }

这样就可以解决多个组件resize的问题了。

前端小白，对vue的认识还不够深入，可能还有更好的办法，欢迎大神指教。

标签：Vue,created,refs,onresize,window,组件,resize
来源： https://blog.csdn.net/u013645668/article/details/122091455

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。