vue+element项目里实时监听某个div宽度的变化,然后执行相应的事件

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

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

思路:因为收缩侧边栏的时候右侧的区域会自动适应,但是echarts不会随之改变

element提供的 element-resize-detector  可以轻松解决问题的存在

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

npm install element-resize-detector

第二步:在项目中使用

   html

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

(1)script引入

<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>


// With default options (will use the object-based approach).
var erd = elementResizeDetectorMaker();

// With the ultra fast scroll-based approach.
// This is the recommended strategy.
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);
});

(2)require 引入使用,在cli项目中使用,需要用到的页面 ***.vue 引入

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

       在mounted中启用

 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)
        //使echarts尺寸重置
        that.$echarts.init(document.getElementById("eChart")).resize()
       
      })
    })

因为gif图为录屏所以导航栏比较卡顿,勉强看一下哦 

 

附大GIF图压缩工具地址:https://ezgif.com/resize/ezgif-1-d76f5cf7b36f.gif 

基本解决问题,有更好的方案,欢迎留言指导,谢谢

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读