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

Question

寻找一种能够使 mat-dialog 既可拖动又可调整大小的方法。 到目前为止，我已经使用 cdkDrag (DragDropModule) 完成了可拖动部分。 我试过使用调整大小：展位； 在 css 中，但它似乎与可拖动功能结合使用时效果不佳。 即，如果我删除 cdk 可调整大小的作品，反之亦然。

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

Answer 1

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

将cdkDragHandle添加到h1元素可以解决您的问题。

<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>

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

Answer 2

对于可调整大小的垫子对话框组件：

像这样将 css 用于面板 class ..

.custom-mat-dialog-panel .mat-dialog-container { 
  resize: both;
}

ts文件：

openDialog() {
    this.dialog.open(HelloComponent,{height:'100px',width:'100px', panelClass: 'custom-mat-dialog-panel'});
}

对于可拖动的垫子对话框组件：

<div mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
 Draggable Title
</div>