vue 监听元素大小变化 element-resize-detector

1，安装

npm install element-resize-detector --save

2、设置成全局插件

element-resize-detector.js：

import ElementResizeDetectorMaker from 'element-resize-detector'export default {install: function(Vue, name = '$erd') {Vue.prototype[name] = ElementResizeDetectorMaker()Vue.use(ElementResizeDetectorMaker)Vue.component('ElementResizeDetectorMaker', ElementResizeDetectorMaker)}
}

3、使用
监听class="hdEchartBox"的元素的大小变化，调用echarts实例对象的resize(), 使echarts图形大小重新变化。

 mounted() {this.$erd.listenTo(document.querySelector('.hdEchartBox'), () => {this.$nextTick(() => {if (this.myChart) {this.myChart.resize()}})})},beforeDestroy() {this.$erd.uninstall(document.querySelector('.hdEchartBox'))},

此包在做自适应模块的时候，可以实时监听页面中元素的宽高变化，弥补了window.onresize只能监听到由浏览器大小变化引起的元素变化的局限性；

其他相关文档：
1、https://blog.csdn.net/qq_39251620/article/details/124132417
2、https://blog.csdn.net/HuangsTing/article/details/107540572