element-resize-detector监听元素宽高变化_elementresizedetectormaker

切换左侧菜单展示效果时，右侧内容会对应宽度，但此时的echarts不能执行自适应效果。切换菜单展示效果不能触发window.onresize 可以用element-resize-detector

element-resize-detector注意事项

• 如果元素具有position:static
  将更改为position:relative。因此，将应用任何无意的top/right/bottom/left/z-index样式，且绝对定位的子项将相对于元素定位。
• 隐藏元素将作为元素的直接子元素注入。

使用

npm install element-resize-detector --save
1

let elementResizeDetectorMaker =  require("element-resize-detector");
1

  mounted() {
    this.$nextTick(() => {
      this.linechart = this.$echarts.init(this.$refs.line);

      this.interval_time = setInterval(() => {
        this.getCurrent()
      }, 1000);

//监听元素变化
      let erd = elementResizeDetectorMaker();
      erd.listenTo(this.$refs.line, () => {
        this.$nextTick(() => {
        //使echarts尺寸重置
          this.linechart.resize();
        });
      });
    });
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

可以使用防抖，动画结束后resize，避免动画过程中不断resize，造成界面卡顿，影响性能

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();
                })
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

npm install element-resize-detector
1

引入依赖

import ElementResizeDetectorMaker from "element-resize-detector"
1

Vue.prototype.$erd = ElementResizeDetectorMaker()
1

使用

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

也可以做这个操作

this.$erd.listenTo(document.querySelector(".left"), (ele) => {
//获取监听的dom元素身上的属性      console.log(ele,ele.offsetWidth,ele.offsetHeight)
    });
1
2
3

如果不使用Lambda表达式作为监听器，会出现不能获取data和methods情况

解决方案

let that = this;
this.$erd.listenTo(document.getElementById("bar"),function(ele) {
	that.$nextTick(function () {
		//重置echarts尺寸
		that.myEcharts.resize();
	})
})
1
2
3
4
5
6
7

具体可看
https://www.npmjs.com/package/element-resize-detector