vue中使用element-resize-detector_elementresizedetectormaker

1，安装

npm install element-resize-detector --save
1

2.使用
引入工具包在组件中使用或者在单独的js中使用

import resizeDetector from 'element-resize-detector'
1

如图，当浏览器窗口发生变化时，但此时的echarts并不能执行自适应效果，这是因为切换菜单展示效果并没有触发window.onresize，所以为解决类似此问题，我们可使用element-resize-detector

3.实际中的应用

  const elementResizeDetectorMaker = require("element-resize-detector");
    let erd = elementResizeDetectorMaker();
    erd.listenTo(this.$refs.lineChart, () => {
      this.$nextTick(function () {
        const lineChart = this.$echarts.init(this.$refs.lineChart);
        //使echarts尺寸重置
        lineChart.resize();
      });
});
1
2
3
4
5
6
7
8
9

4.从元素中移除侦听器

RemoveListener(element，listener)
1

从元素中移除所有侦听器，但不完全删除检测器。如果以后可能会添加侦听器，并且不希望检测器再次初始化，请使用此函数

uninstall(element)
1

最后
如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star:http://github.crmeb.net/u/defu不胜感激 ！

免费获取源码地址：http://www.crmeb.com

PHP学习手册：https://doc.crmeb.com

技术交流论坛：https://q.crmeb.com