antd.modal自适应窗口高度

在Ant Design (antd) 的 Modal 组件中，如果需要实现自适应窗口高度，你可以通过设置 `style` 属性来自定义 modal 的样式。特别是当你希望 modal 可以填充整个可视区域，直到内容结束，可以使用 JavaScript 或者 CSS 来动态计算高度。以下是一个示例：

import { Modal } from 'antd';

// 获取浏览器视口尺寸
const vh = window.innerHeight; // viewport height

function MyModal({ visible, ...rest }) {
  const handleWindowResize = () => {
    const contentHeight = document.getElementById('modal-content').scrollHeight; // 获取模态内容实际高度
    setModalStyle({ height: `${contentHeight}px` }); // 更新 Modal 的高度
  };

  useEffect(() => {
    handleWindowResize();
    window.addEventListener('resize', handleWindowResize);
    return () => window.removeEventListener('resize', handleWindowResize);
  }, []);

  const setModalStyle = (styles) => {
    Modal.style.commonModalWrapper = {
      ...Modal.style.commonModalWrapper,
      ...styles, // 这里应用自定义的高度样式
    };
  };

  // 使用时...
  return (
    <Modal visible={visible} style={{ height: 'auto' }} onShow={handleWindowResize}>
      {/* 内容 */}
      <div id="modal-content">
        <!-- Your modal content here -->
      </div>
    </Modal>
  );
}

// 初始化时先计算一次高度，然后在Modal显示和窗口调整时更新高度
MyModal({ visible: true });

在这个例子中，我们在 Modal 显示时以及窗口大小变化时，都会计算并更新 modal 的高度，使其跟随内容自动适应。