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

Question

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

Answer 1

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

向 h1 元素添加 cdkDragHandle 即可解决您的问题。

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

看看它在你的分叉 StackBlitz.

上是如何工作的

Answer 2

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

像这样对面板 class 使用 css..

.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>

draggable and resizeable mat-dialog in Angular 8