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

<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>

npm install element-resize-detector

import ElementResizeDetectorMaker from "element-resize-detector"
Vue.prototype.$erd = ElementResizeDetectorMaker()

          this.$erd.listenTo(document.getElementById("chinaMapChart"), (element)=>{
            this.resize()
          })

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