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

Vue——全局element-resize-detector监听DOM元素

程序员文章站 2022-06-20 10:55:37
...

解决方案 

第一步:通过npm install element-resize-detector获取elementResizeDetectorMaker

npm install element-resize-detector

第二步:将依赖引入import elementResizeDetectorMaker from ‘element-resize-detector’

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

第三步:使用

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

如果不使用Lambda表达式作为监听器,会出现不能获取data和methods的情况,具体原因参考JavaScript高级教程

解决方案:

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

参考文章

vue 监听某个容器大小变化(饼状图适应容器大小变化)