当前位置:   article > 正文

Vue——全局element-resize-detector监听DOM元素_that.$erd.listento(

that.$erd.listento(

解决方案 

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

npm install element-resize-detector

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

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

第三步:使用

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

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

解决方案:

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

参考文章

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

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/223205
推荐阅读
相关标签
  

闽ICP备14008679号