一个可调整大小的“antd”抽屉？

我想提供一种方法来制作antd抽屉大小可以调整吗？

我读过一本流行的answer https://stackoverflow.com/questions/49469834/recommended-way-to-have-drawer-resizable专门针对material-ui/Drawer但我想做一些非常类似的事情antd.

有没有人有类似的antd例如 - 或者有更好的想法如何处理在抽屉一侧被切断的信息。

您可以扩展宽度Drawer通过指定它width道具。如果你不想扩展它但又希望内容仍然适合，你可以将宽度设置为bodyStyle支撑和使用overflow: "auto":

<Drawer
    title="Basic Drawer"
    placement="right"
    closable={false}
    visible={isDrawerVisible}
    bodyStyle={{
      width: 400,
      overflow: "auto"
    }}
    onClose={toggleDrawerVisible}
>

我还根据以下内容制作了一个可调整大小的抽屉link https://stackoverflow.com/questions/49469834/recommended-way-to-have-drawer-resizable您提供的antd版本（反应钩子版本答案）。

可调整大小的抽屉.jsx

import React, { useState, useEffect } from "react";
import { Drawer } from "antd";

let isResizing = null;

const ResizableDrawer = ({ children, ...props }) => {
  const [drawerWidth, setDrawerWidth] = useState(undefined);

  const cbHandleMouseMove = React.useCallback(handleMousemove, []);
  const cbHandleMouseUp = React.useCallback(handleMouseup, []);

  useEffect(() => {
    setDrawerWidth(props.width);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.visible]);

  function handleMouseup(e) {
    if (!isResizing) {
      return;
    }
    isResizing = false;
    document.removeEventListener("mousemove", cbHandleMouseMove);
    document.removeEventListener("mouseup", cbHandleMouseUp);
  }

  function handleMousedown(e) {
    e.stopPropagation();
    e.preventDefault();
    // we will only add listeners when needed, and remove them afterward
    document.addEventListener("mousemove", cbHandleMouseMove);
    document.addEventListener("mouseup", cbHandleMouseUp);
    isResizing = true;
  }

  function handleMousemove(e) {
    let offsetRight =
      document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
    let minWidth = 256;
    let maxWidth = 600;
    if (offsetRight > minWidth && offsetRight < maxWidth) {
      setDrawerWidth(offsetRight);
    }
  }

  return (
    <Drawer {...props} width={drawerWidth}>
      <div className="sidebar-dragger" onMouseDown={handleMousedown} />
      {children}
    </Drawer>
  );
};

export default ResizableDrawer;

并使用它：

import ResizableDrawer from "./ResizableDrawer";

<ResizableDrawer
    title="Resizable Drawer"
    placement="right"
    closable={false}
    visible={isResizableDrawerVisible}
    onClose={toggleResizableDrawerVisible}
>
    ...
</ResizableDrawer>

请参阅此处的工作演示：