实现Antd Modal拉伸改变弹窗大小

1. 场景：想通过拖动弹窗右下角，实现弹窗大小的自由拉伸，效果类似textarea。

2. 实现思路：利用css的resize属性，将Modal弹窗的容器盒子改为支持拉伸的元素。

我们先来看一下resize的用法（来自MDN）。

（1）resize CSS 属性允许你控制一个元素的可调整大小性。

（2）取值：none-元素不能被用户缩放；both-允许用户在水平和垂直方向上调整元素的大小；horizontal-允许用户在水平方向上调整元素的大小；vertical-允许用户在垂直方向上调整元素的大小。

（3）实例：textarea标签默认resize=both。

在实际项目中的用法

// 根据弹窗高度调整内容区域高度
  const flatRef = useRef(null);

  const onResize = useCallback((entries: any) => {
    requestAnimationFrame(async () => {
      flatRef.current &&
        ((flatRef.current as any).style.height = entries[0].contentRect.height - 54 + "px");
    });
  }, []);

  useEffect(() => {
    const resizeObserver = new ResizeObserver(onResize);
    resizeObserver.observe(document.getElementsByClassName("ant-modal-content")[0]);
    return () => {
      resizeObserver.disconnect();
    };
  }, [onResize]);

return (
    <Modal open={true} className="demo-modal">
        <div ref={ref}>
            ...
        </div>
    </Modal>
)

.demo-modal {
    .ant-modal-content {
        height: 540px;
        overflow: auto;
        resize: both;
    }
}