ResizeObserver监听元素大小的变化

window.resize不适用于dom的监听。

ResizeObserver

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

方法

ResizeObserver.disconnect()
取消特定观察者目标上所有对 Element 的监听。

ResizeObserver.observe()
开始对指定 Element 的监听。

ResizeObserver.unobserve()
结束对指定 Element 的监听。

在页面挂载的时候进行某个dom的监听

const theResizeObserver = new ResizeObserver(this.handleResize);

theResizeObserver.observe(
  document.getElementsByClassName("leftSpanRightBoix")[0]
);

在页面销毁的时候取消监听

theResizeObserver.unobserve(
  document.getElementsByClassName("leftSpanRightBoix")[0]
);

// 该元素触发的回调函数

 handleResize = (dom) => {
   
     // 我自己的处理逻辑
     // ...
    const height = dom[0].contentRect.height;
    console.log(height, "aaa=========");
    if (height > 40) {
   
      !this.state.isShowLine &&
        this.setState({
   
          isShowLine: true,
        });
    } else {
   
      if (this.state.isShowLine !== false) {
   
        this.setState({
   
          isShowLine: false,
        });
      }
    }
  };

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Resize_Observer_API