Question

我正在使用Ant Design的Modal组件，他们似乎并未将可调整性实现到其模式中。我希望能够在打开模态后手动调整其大小。有什么办法吗？

Answer 1

简单的答案是：不。

您可以更改主题中的预设大小，但不能使其动态调整大小。

我猜想，要自行实现会非常棘手。选择另一个具有此功能的小部件（不是来自Ant Design）可能更简单，例如https://www.npmjs.com/package/react-modal-resizable-draggable

Answer 2

所以我最终要做的是使用react-resizable并在模态主体中创建一个ResizableBox。虽然目前还不完善，但这绝对是让我前进的东西。这是我正在做一些https://codesandbox.io/s/l9y9jrk4ym

修改工作的codesandbox

Answer 3

简单的答案是：是的，使用独创性

import React, { useState, useEffect } from 'react'

const ModalView = () => {

    const [visible, setVisible] = useState(false);

    const getWindowDimensions = () => {
       const { innerWidth: width, innerHeight: height } = window
       return { width, height }
    }

    const useWindowDimensions = () => {
       const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions())

       useEffect(() => {
          const handleResize = () => setWindowDimensions(getWindowDimensions())

          window.addEventListener('resize', handleResize)

          return () => window.removeEventListener('resize', handleResize)

        }, [])

        return windowDimensions
    }

    const { width } = useWindowDimensions();

    return (
      <Modal
          closable={true}
          centered
          style={{ width: (80 * width / 100), minWidth: (80 * width / 100) }}
          visible={visible}
          onCancel={() => setVisible(false)}
          footer={false}
      >
       /** your component **/
      </Modal>

    )
}

使蚂蚁设计模式可调整大小

3 个答案: