nz-modal如何去掉底部’确定’和’取消’按钮

原文链接：https://www.longkui.site/program/frontend/nz-modal/6470/

1.自定义底部按钮
在ant-design中有个组件nz-modal，官方给的参考代码如下:

<nz-modal [(nzVisible)]=“isVisible” nzTitle=“The first Modal” (nzOnCancel)=“handleCancel()” (nzOnOk)=“handleOk()”>

Content one

Content two

Content three

基础效果如下：

有时候我们不想要底部的‘取消’和‘确定’按钮，我们可以自定义底部

我们在底部加入 [nzFooter]=”null” 就可以取消掉显示的内容了。

<nz-modal [(nzVisible)]=“isVisible2” nzTitle=“The first Modal” (nzOnCancel)=“handleCancel()” (nzOnOk)=“handleOk()” [nzFooter]=“null”>

Content one

Content two

Content three

如果需要自定义底部内容，我们可以参考下面的代码进行修改。

<nz-modal [(nzVisible)]=“isVisible2” nzTitle=“The first Modal” (nzOnCancel)=“handleCancel()” (nzOnOk)=“handleOk()” [nzFooter]=“modalFooter”>

Content one

Content two

Content three

<ng-template #modalFooter>
Modal Footer:
<button nz-button nzType=“default” (click)=“handleCancel()”>Custom Callback
<button nz-button nzType=“primary” (click)=“handleOk()” [nzLoading]=“isConfirmLoading”>Custom Submit

2.取消handleOk和handleCancel方法
我们关闭模态框的方式可以点击遮罩层或者通过方法修改isVisible2的值。但是我们可以直接在html层就关闭modal。直接将nzOnCancel和nzOnOk修改即可。

<nz-modal [(nzVisible)]=“isVisible2” nzTitle=“The first Modal” (nzOnCancel)=“isVisible2=false” (nzOnOk)=“isVisible2=false” >

Content one

Content two

Content three