当前位置: 代码迷 >> 综合 >> Vue——全局element-resize-detector监听DOM元素
  详细解决方案

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

热度:91   发布时间:2024-02-08 10:38:52.0

解决方案 

第一步:通过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 监听某个容器大小变化(饼状图适应容器大小变化)

 

  相关解决方案