监听父元素宽高，自适应插件大小

原莱_

已于 2022-07-29 16:50:25 修改

阅读量514

点赞数

分类专栏： vue3 js 文章标签： javascript 前端 vue.js

于 2022-07-28 17:39:33 首次发布

本文链接：https://blog.csdn.net/qq_40934617/article/details/126040068

版权

vue3 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

参考文档：ResizeObserver

通常用于第三方插件宽高适应：echarts/antv等

//监听对象变化回调
const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      const width = document.getElementById('fatherbox').clientWidth
      const height = document.getElementById('fatherbox').clientHeight
      document.getElementById('sonbox').style.width = width
    } 
  }
});
//初始化注册监听对象
const init = () => {
  resizeObserver.observe(document.getElementById('fatherbox'));
}