欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue使用element-resize-detector监听元素宽度变化

程序员文章站 2022-05-24 20:35:58
...

如图,当我们切换左侧菜单展示效果的时候,右侧内容会对应变宽,但此时的echarts并不能执行自适应效果,这是因为切换菜单展示效果并没有触发window.onresize,所以为解决类似此问题,我们可使用element-resize-detector

vue使用element-resize-detector监听元素宽度变化

1、引入element-resize-detector,npm install element-resize-detector --save

2、在对应位置上引入即可

vue使用element-resize-detector监听元素宽度变化

let elementResizeDetectorMaker = require("element-resize-detector");
//监听元素变化
let erd = elementResizeDetectorMaker();
let that = this;
erd.listenTo(document.getElementById("bar"), function (element) {
    that.$nextTick(function () {
        //使echarts尺寸重置
        that.myEcharts.resize();
    })
})
            //监听元素变化