vue工程中监听某个div类Dom变化

场景

项目中使用到chart组件，当改变外层容器的宽高时，需要重新绘制resize图表。

方案

1、使用JS原生resize方法，但是只有针对windows窗口对象改变时生效；
2、使用echarts的resize方法
3、推荐：使用element-resize-detector

安装

第一步：vue-cli 项目中安装

npm install element-resize-detector

第二步：按需引入

const eleResizeDetector = require("element-resize-detector")

第三步：Html中Dom

<div id="wrapper">
    <div id="chart">
</div>

第四步：mounted中监听

let that = this;
let erd = eleResizeDetector ()
    erd.listenTo(document.getElementById("wrapper"), function (element) {
      let width = element.offsetWidth
      let height = element.offsetHeight
      that.$nextTick(function () {
        console.log("Size: " + width + "x" + height)
        //使echarts尺寸重置
        that.$echarts.init(document.getElementById("chart")).resize()
       
      })
    })