vue使用element-resize-detector監聽元素寬度變化

如圖,當我們切換左側菜單展示效果的時候,右側內容會對應變寬,但此時的echarts並不能執行自適應效果,這是因爲切換菜單展示效果並沒有觸發window.onresize,所以爲解決類似此問題,我們可使用element-resize-detector

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

2、在對應位置上引入即可

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();
    })
})
            //監聽元素變化

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章