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