ng-zorro中Modal对话框细节操作

很多时候，官网给的模板不适合我们的需求，这里是我对官网对话框的样式修改

官网样式：

1、修改宽度

具体代码：

   <button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button>
    // 只加nzWidth属性，其他不变
    <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzWidth]='1000'>
      <p>Content one</p>
      <p>Content two</p>
      <p>Content three</p>
      <p>Content three</p>
    </nz-modal>

import { Component } from '@angular/core';

export class NzDemoModalBasicComponent {
  isVisible = false;

  constructor() {}

  showModal(): void {
    this.isVisible = true;
  }

  handleOk(): void {
    console.log('Button ok clicked!');
    this.isVisible = false;
  }

  handleCancel(): void {
    console.log('Button cancel clicked!');
    this.isVisible = false;
  }
}

效果（高没有修改）：

2、给内容添加滑动框

不加滑动条时：

效果图：

代码：
增加css样式，ng-deep是覆盖原本样式，！important是增加权重

// 对话框的高
::ng-deep .ant-modal-body {
    height: 300px !important;
    overflow-y: auto !important;
}

扩展：
效果图

// 滚动条
::ng-deep .ant-modal-body::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
::ng-deep .ant-modal-body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #56abf2;
}
::ng-deep .ant-modal-body::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #bee1eb;
}

3、隐藏 取消确定 按钮

效果：

代码：

        <nz-modal [(nzVisible)]="isVisible"  nzTitle="对话框" (nzOnCancel)="handleCancel()" [nzFooter]="null">
        ……
        </nz-modal>

注意：这里的nzOnCancel不能省，右上角的取消也靠这个函数

4、自定义脚部

这个官网有实例
链接：https://ng.ant.design/components/modal/zh#components-modal-demo-basic

有其他发现的话，继续添加，暂时这些