element秃头小笔记

关于element-resize-detector监听容器宽高变化遇到的一个坑

       今天，记录下来人生的第一篇博客，之前做笔记都是用文档，但是呢 ，感觉，感觉在在博客中记录一下也挺好的，学习嘛木九十不断累积的过程…好了不吹牛逼了，直奔主题。
今天，做项目的时候由于需求，做charts图表的时候，因为需要做自适应容器，因为项目又是基于vue+element开发的，自然而然想到了用 element-resize-detector监听dom元素
这里，也顺便说一下element-resize-detector的相关运用：
第一步：基于vue嘛，当然通过npm install element-resize-detector下载相关依赖嘛

  npm install element-resize-detector

第二步：将依赖引入import elementResizeDetectorMaker from ‘element-resize-detector’，当然也可以全局抛出，方便项目各个页面运用。看自己需求，在main.js:

import ElementResizeDetectorMaker from "element-resize-detector"
Vue.prototype.$erd = ElementResizeDetectorMaker()

第三步：项目运用：chinaMapChart是div的id,（当然也可以通过ref获取dom元素）

this.$erd.listenTo(document.getElementById("chinaMapChart"), (element)=>
console.log(element，“element”)
{
        //这里是你要做的操作，比如监听chartsdiv容器变化时候可以重新，that自己在上面声明一下，例如：
        that.$nextTick(function () {
        //使echarts尺寸重置
        that.myEcharts.resize();
    })
          })

当我以为一切都挺很顺利的完成开发工作的时候，这时候问题来了，我打印了一下那个element参数，我发现这里的代码是一直死循环的，我又把代码重新看了一遍，发现没有问题，以前也用过这个操作监听元素，都没遇到这种坑，后来我定位问题，既然他一直触发里面的事件，说明肯定是这个div容器的宽高可能是一直变化的，我看了一下这个我的这个div的父元素，我用了flex布局，因为一把梭容易嘛，因为我把一个div垂直方向分成了几份不一样的比例，后来我直接改成用height他就没有意向在里面一直运行，我觉得之所以有这样的原因，坑是在flex布局是实时计算改变对应的宽高的吧。

好了，问题解决了，大家一起加油！