vue utilise element-resize-detector pour surveiller les changements de largeur d'élément

Comme le montre la figure, lorsque nous changeons l'effet d'affichage du menu de gauche, le contenu de droite sera élargi, mais echarts ne peut pas effectuer l'effet adaptatif pour le moment. En effet, le changement d'effet d'affichage du menu ne déclenche pas la fenêtre. onresize, donc pour résoudre des problèmes comme celui-ci, nous pouvons utiliser element-resize-detector

 

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

2. Il suffit de l'introduire à l'endroit correspondant

 

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();
    })
})
//监听元素变化

PS : s'il y a un effet d'animation pendant le processus de changement de largeur, nous pouvons utiliser l'anti-shake à ce moment-là pour redimensionner une fois l'animation terminée. L'avantage est d'éviter un redimensionnement continu pendant le processus d'animation, provoquant le gel de l'interface. et affectant les performances.

 

节流与防抖代码见：https://blog.csdn.net/Ag_wenbi/article/details/106879625
<template>
    <div class="page">
        <div id="bar" class="echarts"></div>
    </div>
</template>
 
<script>
    let elementResizeDetectorMaker = require("element-resize-detector");
    import {debounce} from 'utils.js';
    export default {
        name:'page',
        mounted(){
            let erd = elementResizeDetectorMaker();
            let that = this;
            erd.listenTo(document.getElementById("bar"), debounce(this.resizeFunc))
        },
        methods:{
            resizeFunc(element){
                console.log(element);//element元素信息
                that.$nextTick(function () {
                    //使echarts尺寸重置
                    that.myEcharts.resize();
                })
            }
        }
    }
</script>
 
<style lang="scss" scoped>
.page{
    width:100%;
    height:100%;
    .echarts{
        width:100%;
        height:100%;
    }
}
</style>