Angular 8 中可拖动且可调整大小的垫对话框

ind*_*ndd 5 css angular-material angular angular-cdk

寻找一种能够使垫对话框既可拖动又可调整大小的方法。到目前为止,我已经使用 cdkDrag (DragDropModule) 完成了可拖动部分。我尝试过使用调整大小:展位;在 css 中,但它似乎与可拖动功能结合使用效果不佳。即,如果我删除 cdk,则可调整大小,反之亦然。

请参阅此处的代码:https ://stackblitz.com/edit/angular-vp8xt7

umi*_*der 5

在您的 中StackBlitz,调整大小手柄出现在对话框的右下角,因此您就快到了。问题在于鼠标事件由拖动功能消耗,而不是交给调整大小功能。

cdkDragHandle向元素添加 ah1可以解决您的问题。

<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
Run Code Online (Sandbox Code Playgroud)

看看它在你的分叉StackBlitz上是如何工作的。