element-resize-detector_elementresizedetectormaker

碎碎念：

工作遇到了，然后就在网上各种copy了，CV搬砖

element-resize-detector 监听元素宽高变化，可以帮助使用者在元素尺寸发生变化时执行某些操作，比如浏览器显示区域变化echarts跟着变化。

link1: https://github.com/wnr/element-resize-detector.git

link2:GitHub - wnr/element-resize-detector: Optimized cross-browser resize listener for elements.

1、安装

方式1：

npm install element-resize-detector --save

方式2：

下载js库在script标签中引用

<script src="/path/to/element-resize-detector.js"></script>

2、引入

Secen1

Vue2项目可在main.js中引用并全局挂载

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

Secen2

也可以在需要使用的页面使用

注意：这里使用require引用 

var elementResizeDetectorMaker = require("element-resize-detector");

3、使用

Secen1

 dynamicResize() {
      this.$erd.listenTo(
        document.querySelector(".line-container"),
        _.debounce(() => {
          this.resizeChart();
        }, 300)
      );
   },

Secen2

 dynamicResize() {
      var erd = elementResizeDetectorMaker();
      erd.listenTo(
        document.querySelector(".line-container"),
        _.debounce(() => {
          this.resizeChart();
        }, 300)
      );  
     
    },

在mounted中使用这个方法即可

  mounted() {
    this.myChart = this.$echarts.init(this.$refs.lineContainer);
    this.initChart();
    this.dynamicResize();
  },

在页面销毁前停止监听

Secen1

  beforeDestroy() { 
    this.$erd.uninstall(document.querySelector(".line-container")); 
  },

Secen2

 beforeDestroy() {
    var erd = elementResizeDetectorMaker();
    erd.uninstall(document.querySelector(".line-container"));
  },

然后就没然后了，完工！！！