关于vue.js:vue中使用elementresizedetector

1,装置

npm install element-resize-detector --save

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

import resizeDetector from 'element-resize-detector'

如图,当浏览器窗口发生变化时,但此时的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();
      });
});

4.从元素中移除侦听器

RemoveListener(element,listener)

从元素中移除所有侦听器,但不齐全删除检测器。如果当前可能会增加侦听器,并且不心愿检测器再次初始化,请应用此函数

uninstall(element)
最初
如果你感觉这篇文章对你有点用的话,麻烦请给咱们的开源我的项目点点star:http://github.crmeb.net/u/defu不胜感激 !

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

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

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理