reactjs - 重新调整大小 : only resize one side

Question

我正在使用这个 re-resizable实现调整大小功能的库。要求是实现一侧调整大小，这意味着如果我从 div 的右侧调整大小，只有那一侧应该向右扩展。左侧应保持在同一位置。

我已经阅读了文档并尝试了一些 Prop ，但没有成功。谢谢。

这是我的 codesandbox .

Answer 1

您可以使用 handleClasses 属性将 css 类名应用到特定的边。例如，如果您只想从右侧调整大小，您可以执行以下操作:

.pointer-events-none {
  pointer-events: none;
}

<Resizable
  handleClasses={{
    top: "pointer-events-none",
    bottom: "pointer-events-none",
    left: "pointer-events-none",
    topRight: "pointer-events-none",
    bottomRight: "pointer-events-none",
    bottomLeft: "pointer-events-none",
    topLeft: "pointer-events-none",
  }}
>
  <YourComponent />
</Resizable>

通过在 handleClasses 对象中排除 right 属性，您将禁用除右侧之外每一侧的指针事件。