vue+element项目里实时监听某个div宽度的变化

vue项目中用到echarts图表，页面上有侧边栏，侧边栏收缩图表不能自适应，想通过监听内容部分的宽度让图表resize，试过window带的resize，只能监听浏览器窗口大小变化，为了监听某元素区域的变化而使echarts的尺寸重置。

• 原文链接 https://blog.csdn.net/csl125/article/details/89245267
• vue+element项目里实时监听某个div宽度的变化，然后执行相应的事件

  采用 element-resize-detector 可以完美的解决

• 因为收缩侧边栏的时候右侧的区域会自动适应，但是echarts不会随之改变,只有窗口发生变化才会触发resize以及布局的动态改变都不会触发resize

  第一步：在项目中安装 element-resize-detector

  npm install element-resize-detector --save-dev

  dom结构

  <div id="test">
      <div id="eChart">
  </div>

  vue中使用 在需要用到的页面在mounted中启用

  var elementResizeDetectorMaker = require("element-resize-detector")
  var erd = elementResizeDetectorMaker()
  erd.listenTo(document.getElementById("test"), function (element) {
    var width = element.offsetWidth
    var height = element.offsetHeight
    that.$nextTick(function () {
      console.log("Size: " + width + "x" + height)
      this.initChart();//重新运行图表方法（可以不要）
      //使echarts尺寸重置
      that.$echarts.init(document.getElementById("eChart")).resize()
    })
  })

  原生script引入使用用法

  <script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>
  
  var erd = elementResizeDetectorMaker();
  
  var erdUltraFast = elementResizeDetectorMaker({
    strategy: "scroll" //<- For ultra performance.
  });
  
  //监听元素size变化，触发响应事件
  erd.listenTo(document.getElementById("test"), function(element) {
    var width = element.offsetWidth;
    var height = element.offsetHeight;
    console.log("Size: " + width + "x" + height);
  });

赏

谢谢你请我吃糖果

支付宝

微信