vue中监听元素尺寸变化

data中

widthPlay: 0, //元素宽
        heightPlay: 0, //元素高
        observer: null

mounted中监听

let ResizeObserver = window.ResizeObserver || window.WebKitResizeObserver || window.MozResizeObserver;
      this.observer = new ResizeObserver(() => {
        let widthPlay = document.querySelector('.player').style.width
        //this.$refs['cost-echarts'].clientWidth替换更好
        let heightPlay = document.querySelector('.player').style.height
        if (this.widthPlay != widthPlay || this.heightPlay != heightPlay) {
         //everything
        }
      });
      this.observer.observe(document.querySelector('.player'), {
        attributes: true,
        attributeFilter: ['style'],
        attributeOldValue: true
      })
      //this.observer.observe(document.querySelector('.player'))

beforeDestroy时取消

if (this.observer) {
        this.observer.disconnect()
        this.observer = null
      }

搞定