监控DOM元素width和height变化

在项目中用到了Echart表格，需要监控div的尺寸变化。目前有几种方案：

一、ResizeObserver

这个 API 就是监听 DOM 尺寸变化的，只不过各浏览器的兼容性很差。

1
2
3
4
5
const resizeObserver = new ResizeObserver(entries => {
    this.echart.resize()
})
resizeObserver.observe(this.$el.getElementsByClassName('mapEcharts')[0])

二、iframe(最佳)

window 有 resize 事件，利用 iframe 来达到同样的效果。

动态创建 iframe 标签，追加到容器中，宽高继承容器100%；
获取 iframe 中的window，通过 contentWindow 属性就能获取到；
由于 iframe 的宽高继承与父节点，当父容器宽度发生变化，自然会触发iframe中的 resize 事件；

1
2
3
4
document.querySelector("#ifarme-id").contentWindow.addEventListener('resize', () => {
    console.log('size-change！');
}, false)

三、插件

若果想省事，使用插件就可以解决 - element-resize-detector

1
2
3
4
5
6
7
8
9
const elementResizeDetectorMaker = require("element-resize-detector");
resizeFun() {
  const erd = elementResizeDetectorMaker();
  erd.listenTo(document.getElementById("barBox"), (element) => {
    this.$nextTick( ()=> {
      this.echarts.resize();
    });
  });
},