Modal对话框

    需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 在当前页面正中打开一个浮层，承载相应的操作。

    另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 NzModalService.confirm() 等方法。

    推荐使用加载Component的方式弹出Modal，这样弹出层的Component逻辑可以与外层Component完全隔离，并且做到可以随时复用，

    在弹出层Component中可以通过依赖注入NzModalRef方式直接获取模态框的组件实例，用于控制在弹出层组件中控制模态框行为。

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    第一个对话框。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-modal-basic',
    5.   template: `
    6.     <button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button>
    7.     <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
    8.       <p>Content one</p>
    9.       <p>Content two</p>
    10.       <p>Content three</p>
    11.     </nz-modal>
    12.   `
    13. })
    14. export class NzDemoModalBasicComponent {
    15.   isVisible = false;
    17.   constructor() {}
    19.   showModal(): void {
    20.     this.isVisible = true;
    21.   }
    23.   handleOk(): void {
    24.     console.log('Button ok clicked!');
    25.     this.isVisible = false;
    26.   }
    28.   handleCancel(): void {
    29.     console.log('Button cancel clicked!');
    30.     this.isVisible = false;
    31.   }
    32. }

    Modal对话框 - 图2

    自定义页脚

    更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。

    不需要默认确定取消按钮时，你可以把 nzFooter 设为 null。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-modal-footer',
    5.   template: `
    6.     <button nz-button nzType="primary" (click)="showModal()">
    7.       <span>Show Modal</span>
    8.     </button>
    9.     <nz-modal
    10.       [(nzVisible)]="isVisible"
    11.       [nzTitle]="modalTitle"
    12.       [nzContent]="modalContent"
    13.       [nzFooter]="modalFooter"
    14.       (nzOnCancel)="handleCancel()"
    15.     >
    16.       <ng-template #modalTitle>
    17.         Custom Modal Title
    18.       </ng-template>
    20.       <ng-template #modalContent>
    21.         <p>Modal Content</p>
    22.         <p>Modal Content</p>
    23.         <p>Modal Content</p>
    24.         <p>Modal Content</p>
    25.         <p>Modal Content</p>
    26.       </ng-template>
    28.       <ng-template #modalFooter>
    29.         <span>Modal Footer: </span>
    30.         <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
    31.         <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
    32.       </ng-template>
    33.     </nz-modal>
    34.   `
    35. })
    36. export class NzDemoModalFooterComponent {
    37.   isVisible = false;
    38.   isConfirmLoading = false;
    40.   constructor() {}
    42.   showModal(): void {
    43.     this.isVisible = true;
    44.   }
    46.   handleOk(): void {
    47.     this.isConfirmLoading = true;
    48.     setTimeout(() => {
    49.       this.isVisible = false;
    50.       this.isConfirmLoading = false;
    51.     }, 3000);
    52.   }
    54.   handleCancel(): void {
    55.     this.isVisible = false;
    56.   }
    57. }

    使用 NzModalService.confirm() 可以快捷地弹出确认框。

    1. import { Component } from '@angular/core';
    2. import { NzModalService } from 'ng-zorro-antd/modal';
    4. @Component({
    5.   selector: 'nz-demo-modal-confirm',
    6.   template: `
    7.     <button nz-button nzType="info" (click)="showConfirm()">Confirm</button>
    8.     <button nz-button nzType="dashed" (click)="showDeleteConfirm()">Delete</button>
    9.   `,
    10.   styles: [
    11.     `
    12.       button {
    13.         margin-right: 8px;
    14.       }
    15.     `
    16.   ]
    17. })
    18. export class NzDemoModalConfirmComponent {
    19.   constructor(private modalService: NzModalService) {}
    21.   showConfirm(): void {
    22.     this.modalService.confirm({
    23.       nzTitle: '<i>Do you Want to delete these items?</i>',
    24.       nzContent: '<b>Some descriptions</b>',
    25.       nzOnOk: () => console.log('OK')
    26.     });
    27.   }
    29.   showDeleteConfirm(): void {
    30.     this.modalService.confirm({
    31.       nzTitle: 'Are you sure delete this task?',
    32.       nzContent: '<b style="color: red;">Some descriptions</b>',
    33.       nzOkText: 'Yes',
    34.       nzOkType: 'danger',
    35.       nzOnOk: () => console.log('OK'),
    36.       nzCancelText: 'No',
    37.       nzOnCancel: () => console.log('Cancel')
    38.     });
    39.   }
    40. }

    Modal对话框 - 图4

    信息提示

    各种类型的信息提示，只提供一个按钮用于关闭。

    1. import { Component } from '@angular/core';
    2. import { NzModalService } from 'ng-zorro-antd/modal';
    4. @Component({
    5.   selector: 'nz-demo-modal-info',
    6.   template: `
    7.     <button nz-button (click)="info()">Info</button>
    8.     <button nz-button (click)="success()">Success</button>
    9.     <button nz-button (click)="error()">Error</button>
    10.     <button nz-button (click)="warning()">Warning</button>
    11.   `,
    12.   styles: [
    13.     `
    14.       button {
    15.         margin-right: 8px;
    16.       }
    17.     `
    18.   ]
    19. })
    20. export class NzDemoModalInfoComponent {
    21.   constructor(private modalService: NzModalService) {}
    23.   info(): void {
    24.     this.modalService.info({
    25.       nzTitle: 'This is a notification message',
    26.       nzContent: '<p>some messages...some messages...</p><p>some messages...some messages...</p>',
    27.       nzOnOk: () => console.log('Info OK')
    28.     });
    29.   }
    31.   success(): void {
    32.     this.modalService.success({
    33.       nzTitle: 'This is a success message',
    34.       nzContent: 'some messages...some messages...'
    35.     });
    36.   }
    38.   error(): void {
    39.     this.modalService.error({
    40.       nzTitle: 'This is an error message',
    41.       nzContent: 'some messages...some messages...'
    42.     });
    43.   }
    45.   warning(): void {
    46.     this.modalService.warning({
    47.       nzTitle: 'This is an warning message',
    48.       nzContent: 'some messages...some messages...'
    49.     });
    50.   }
    51. }

    手动关闭modal。

    服务方式创建

    Modal的service用法，示例中演示了用户自定义模板、自定义component、以及注入模态框实例的方法。

    1. /* entryComponents: NzModalCustomComponent */
    3. import { Component, Input, TemplateRef } from '@angular/core';
    4. import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
    6. @Component({
    7.   selector: 'nz-demo-modal-service',
    8.   template: `
    9.     <button nz-button nzType="primary" (click)="createModal()">
    10.       <span>String</span>
    11.     </button>
    13.     <button nz-button nzType="primary" (click)="createTplModal(tplTitle, tplContent, tplFooter)">
    14.       <span>Template</span>
    15.     </button>
    16.     <ng-template #tplTitle>
    17.       <span>Title Template</span>
    18.     </ng-template>
    19.     <ng-template #tplContent>
    20.       <p>some contents...</p>
    21.       <p>some contents...</p>
    22.       <p>some contents...</p>
    23.       <p>some contents...</p>
    24.       <p>some contents...</p>
    25.     <ng-template #tplFooter>
    26.       <button nz-button nzType="primary" (click)="destroyTplModal()" [nzLoading]="tplModalButtonLoading">
    27.         Close after submit
    28.       </button>
    29.     </ng-template>
    31.     <br /><br />
    33.     <button nz-button nzType="primary" (click)="createComponentModal()">
    34.       <span>Use Component</span>
    35.     </button>
    37.     <button nz-button nzType="primary" (click)="createCustomButtonModal()">Custom Button</button>
    39.     <br /><br />
    41.     <button nz-button nzType="primary" (click)="openAndCloseAll()">Open more modals then close all after 2s</button>
    42.     <nz-modal [(nzVisible)]="htmlModalVisible" nzMask="false" nzZIndex="1001" nzTitle="Non-service html modal"
    43.       >This is a non-service html modal</nz-modal
    44.     >
    45.   `,
    46.   styles: [
    47.     `
    48.       button {
    49.         margin-right: 8px;
    50.       }
    52.   ]
    53. })
    54. export class NzDemoModalServiceComponent {
    55.   tplModal: NzModalRef;
    56.   tplModalButtonLoading = false;
    57.   htmlModalVisible = false;
    58.   disabled = false;
    60.   constructor(private modalService: NzModalService) {}
    62.   createModal(): void {
    63.     this.modalService.create({
    64.       nzTitle: 'Modal Title',
    65.       nzContent: 'string, will close after 1 sec',
    66.       nzClosable: false,
    67.       nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000))
    68.     });
    69.   }
    71.   createTplModal(tplTitle: TemplateRef<{}>, tplContent: TemplateRef<{}>, tplFooter: TemplateRef<{}>): void {
    72.     this.tplModal = this.modalService.create({
    73.       nzTitle: tplTitle,
    74.       nzContent: tplContent,
    75.       nzFooter: tplFooter,
    76.       nzMaskClosable: false,
    77.       nzClosable: false,
    78.       nzOnOk: () => console.log('Click ok')
    79.     });
    80.   }
    82.   destroyTplModal(): void {
    83.     this.tplModalButtonLoading = true;
    84.     setTimeout(() => {
    85.       this.tplModalButtonLoading = false;
    86.       this.tplModal.destroy();
    87.     }, 1000);
    88.   }
    90.   createComponentModal(): void {
    91.     const modal = this.modalService.create({
    92.       nzTitle: 'Modal Title',
    93.       nzContent: NzModalCustomComponent,
    94.       nzComponentParams: {
    95.         title: 'title in component',
    96.         subtitle: 'component sub title，will be changed after 2 sec'
    97.       },
    98.       nzFooter: [
    99.         {
    100.           label: 'change component title from outside',
    101.           onClick: componentInstance => {
    102.             componentInstance!.title = 'title in inner component is changed';
    103.           }
    104.         }
    105.       ]
    106.     });
    108.     modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    110.     // Return a result when closed
    111.     modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
    113.     // delay until modal instance created
    114.     setTimeout(() => {
    115.       const instance = modal.getContentComponent();
    116.       instance.subtitle = 'sub title is changed';
    117.     }, 2000);
    118.   }
    120.   createCustomButtonModal(): void {
    121.     const modal: NzModalRef = this.modalService.create({
    122.       nzTitle: 'custom button demo',
    123.       nzContent: 'pass array of button config to nzFooter to create multiple buttons',
    124.       nzFooter: [
    125.         {
    126.           label: 'Close',
    127.           shape: 'default',
    128.           onClick: () => modal.destroy()
    129.         },
    130.         {
    131.           label: 'Confirm',
    132.           type: 'primary',
    133.           onClick: () =>
    134.             this.modalService.confirm({ nzTitle: 'Confirm Modal Title', nzContent: 'Confirm Modal Content' })
    135.         },
    136.         {
    137.           label: 'Change Button Status',
    138.           type: 'danger',
    139.           loading: false,
    140.           onClick(): void {
    141.             this.loading = true;
    142.             setTimeout(() => (this.loading = false), 1000);
    143.             setTimeout(() => {
    144.               this.loading = false;
    145.               this.disabled = true;
    146.               this.label = 'can not be clicked！';
    147.             }, 2000);
    148.           }
    149.         },
    150.         {
    151.           label: 'async load',
    152.           type: 'dashed',
    153.           onClick: () => new Promise(resolve => setTimeout(resolve, 2000))
    154.         }
    155.       ]
    156.     });
    157.   }
    159.   openAndCloseAll(): void {
    160.     let pos = 0;
    162.     ['create', 'info', 'success', 'error'].forEach(method =>
    163.       // @ts-ignore
    164.       this.modalService[method]({
    165.         nzMask: false,
    166.         nzTitle: `Test ${method} title`,
    167.         nzContent: `Test content: <b>${method}</b>`,
    168.         nzStyle: { position: 'absolute', top: `${pos * 70}px`, left: `${pos++ * 300}px` }
    169.       })
    170.     );
    172.     this.htmlModalVisible = true;
    174.     this.modalService.afterAllClose.subscribe(() => console.log('afterAllClose emitted!'));
    176.     setTimeout(() => this.modalService.closeAll(), 2000);
    177.   }
    178. }
    180. @Component({
    181.   selector: 'nz-modal-custom-component',
    182.   template: `
    183.     <div>
    184.       <h2>{{ title }}</h2>
    185.       <h4>{{ subtitle }}</h4>
    186.       <p>
    187.         <span>Get Modal instance in component</span>
    188.         <button nz-button [nzType]="'primary'" (click)="destroyModal()">destroy modal in the component</button>
    189.       </p>
    190.     </div>
    191.   `
    192. })
    193. export class NzModalCustomComponent {
    194.   @Input() title: string;
    195.   @Input() subtitle: string;
    197.   constructor(private modal: NzModalRef) {}
    199.   destroyModal(): void {
    200.     this.modal.destroy({ data: 'this the result data' });
    201.   }
    202. }

    Modal对话框 - 图7

    点击确定后异步关闭对话框，例如提交表单。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-modal-async',
    5.   template: `
    6.     <button nz-button nzType="primary" (click)="showModal()">
    7.       <span>Show Modal</span>
    8.     </button>
    9.     <nz-modal
    10.       [(nzVisible)]="isVisible"
    11.       nzTitle="Modal Title"
    12.       (nzOnCancel)="handleCancel()"
    13.       (nzOnOk)="handleOk()"
    14.       [nzOkLoading]="isOkLoading"
    15.     >
    16.       <p>Modal Content</p>
    17.     </nz-modal>
    18.   `
    19. })
    20. export class NzDemoModalAsyncComponent {
    21.   isVisible = false;
    22.   isOkLoading = false;
    24.   showModal(): void {
    25.     this.isVisible = true;
    26.   }
    28.   handleOk(): void {
    29.     this.isOkLoading = true;
    30.     setTimeout(() => {
    31.       this.isVisible = false;
    32.       this.isOkLoading = false;
    33.     }, 3000);
    34.   }
    36.   handleCancel(): void {
    37.     this.isVisible = false;
    38.   }
    39. }

    自定义页脚(2)

    使用 nzModalFooter 指令自定义了页脚的按钮。

    1. /* entryComponents: NzModalCustomFooterComponent */
    2. import { Component } from '@angular/core';
    3. import { NzModalService, NzModalRef } from 'ng-zorro-antd/modal';
    5. @Component({
    6.   selector: 'nz-demo-modal-footer2',
    7.   template: `
    8.     <button nz-button nzType="primary" (click)="showModal1()">
    9.       <span>In Template</span>
    10.     </button>
    11.     <br />
    12.     <br />
    13.     <button nz-button nzType="primary" (click)="showModal2()">
    14.       <span>In Component</span>
    15.     </button>
    16.     <nz-modal [(nzVisible)]="isVisible" nzTitle="Custom Modal Title" (nzOnCancel)="handleCancel()">
    17.       <div>
    18.         <p>Modal Content</p>
    19.         <p>Modal Content</p>
    20.         <p>Modal Content</p>
    21.         <p>Modal Content</p>
    22.         <p>Modal Content</p>
    23.       </div>
    24.       <div *nzModalFooter>
    25.         <span>Modal Footer: </span>
    26.         <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
    27.         <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
    28.       </div>
    29.     </nz-modal>
    30.   `,
    31.   styles: []
    32. })
    33. export class NzDemoModalFooter2Component {
    34.   isVisible = false;
    35.   isConfirmLoading = false;
    37.   constructor(private modalService: NzModalService) {}
    39.   showModal1(): void {
    40.     this.isVisible = true;
    41.   }
    43.   showModal2(): void {
    44.     this.modalService.create({
    45.       nzTitle: 'Modal Title',
    46.       nzContent: NzModalCustomFooterComponent
    48.   }
    50.   handleOk(): void {
    51.     this.isConfirmLoading = true;
    52.     setTimeout(() => {
    53.       this.isVisible = false;
    54.       this.isConfirmLoading = false;
    55.     }, 3000);
    56.   }
    58.   handleCancel(): void {
    59.     this.isVisible = false;
    60.   }
    61. }
    63. @Component({
    64.   selector: 'nz-modal-custom-footer-component',
    65.   template: `
    66.     <div>
    67.       <p>Modal Content</p>
    68.       <p>Modal Content</p>
    69.       <p>Modal Content</p>
    70.       <p>Modal Content</p>
    71.       <p>Modal Content</p>
    72.     </div>
    73.     <div *nzModalFooter>
    74.       <button nz-button nzType="default" (click)="destroyModal()">Custom Callback</button>
    75.       <button nz-button nzType="primary" (click)="destroyModal()">Custom Submit</button>
    76.     </div>
    77.   `
    78. })
    79. export class NzModalCustomFooterComponent {
    80.   constructor(private modal: NzModalRef) {}
    82.   destroyModal(): void {
    83.     this.modal.destroy();
    84.   }
    85. }

    Modal对话框 - 图9

    使用 NzModalService.confirm() 可以快捷地弹出确认框。NzOnCancel/NzOnOk 返回 promise 可以延迟关闭

    1. import { Component } from '@angular/core';
    2. import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
    4. @Component({
    5.   selector: 'nz-demo-modal-confirm-promise',
    6.   template: `
    7.     <button nz-button nzType="info" (click)="showConfirm()">Confirm</button>
    8.   `
    9. })
    10. export class NzDemoModalConfirmPromiseComponent {
    11.   confirmModal: NzModalRef; // For testing by now
    13.   constructor(private modal: NzModalService) {}
    15.   showConfirm(): void {
    16.     this.confirmModal = this.modal.confirm({
    17.       nzTitle: 'Do you Want to delete these items?',
    18.       nzContent: 'When clicked the OK button, this dialog will be closed after 1 second',
    19.       nzOnOk: () =>
    20.         new Promise((resolve, reject) => {
    21.           setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
    22.         }).catch(() => console.log('Oops errors!'))
    23.     });
    24.   }
    25. }

    设置 nzOkText 与 nzCancelText 以自定义按钮文字。

    Modal对话框 - 图11

    自定义位置

    您可以直接使用 nzStyle.top 或配合其他样式来设置对话框位置。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-modal-position',
    5.   template: `
    6.     <button nz-button nzType="primary" (click)="showModalTop()">Display a modal dialog at 20px to Top</button>
    7.     <nz-modal
    8.       [nzStyle]="{ top: '20px' }"
    9.       [(nzVisible)]="isVisibleTop"
    10.       nzTitle="20px to Top"
    11.       (nzOnCancel)="handleCancelTop()"
    12.       (nzOnOk)="handleOkTop()"
    13.     >
    14.       <p>some contents...</p>
    15.       <p>some contents...</p>
    16.       <p>some contents...</p>
    17.     </nz-modal>
    19.     <br /><br />
    21.     <button nz-button nzType="primary" (click)="showModalMiddle()">Vertically centered modal dialog</button>
    22.     <nz-modal
    23.       nzWrapClassName="vertical-center-modal"
    24.       [(nzVisible)]="isVisibleMiddle"
    25.       nzTitle="Vertically centered modal dialog"
    26.       (nzOnCancel)="handleCancelMiddle()"
    27.       (nzOnOk)="handleOkMiddle()"
    28.     >
    29.       <p>some contents...</p>
    30.       <p>some contents...</p>
    31.       <p>some contents...</p>
    32.     </nz-modal>
    33.   `,
    34.   styles: [
    35.     `
    36.       ::ng-deep .vertical-center-modal {
    37.         display: flex;
    38.         align-items: center;
    39.         justify-content: center;
    40.       }
    42.       ::ng-deep .vertical-center-modal .ant-modal {
    43.         top: 0;
    44.       }
    45.     `
    46.   ]
    47. })
    48. export class NzDemoModalPositionComponent {
    49.   isVisibleTop = false;
    50.   isVisibleMiddle = false;
    52.   showModalTop(): void {
    53.     this.isVisibleTop = true;
    54.   }
    56.   showModalMiddle(): void {
    57.     this.isVisibleMiddle = true;
    58.   }
    60.   handleOkTop(): void {
    61.     console.log('点击了确定');
    62.     this.isVisibleTop = false;
    63.   }
    65.   handleCancelTop(): void {
    66.     this.isVisibleTop = false;
    67.   }
    69.   handleOkMiddle(): void {
    70.     console.log('click ok');
    71.     this.isVisibleMiddle = false;
    72.   }
    74.   handleCancelMiddle(): void {
    75.     this.isVisibleMiddle = false;
    76.   }
    77. }

    对话框当前分为2种模式，普通模式 和 确认框模式（即Confirm对话框，通过调用confirm/info/success/error/warning弹出），两种模式对API的支持程度稍有不同。

    注意

    采用服务方式创建普通模式对话框

    包括：

    • NzModalService.info
    • NzModalService.success
    • NzModalService.error
    • NzModalService.warning
    • NzModalService.confirm以上均为一个函数，参数为 object，与上方API一致。部分属性类型或初始值有所不同，已列在下方：

    以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。

    1. constructor(modal: NzModalService) {
    2.   const ref: NzModalRef = modal.info();
    3.   ref.close(); // 或 ref.destroy(); 将直接销毁对话框
    4. }

    NzModalService的其他方法/属性service

    NzModalRef

    通过服务方式 NzModalService.xxx() 创建的对话框，都会返回一个 NzModalRef 对象，用于操控该对话框（若使用nzContent为Component时，也可通过依赖注入 NzModalRef 方式获得此对象），该对象具有以下方法：

    全局配置（NZ_MODAL_CONFIG）如果要进行全局默认配置，你可以设置提供商 NZ_MODAL_CONFIG 的值来实现。（如：在你的模块的providers中加入 { provide: NZ_MODAL_CONFIG, useValue: { nzMask: false }}，NZ_MODAL_CONFIG 可以从 ng-zorro-antd 中导入）

    全局配置，组件默认值，组件层级配置之间的权重如下：

    组件层级配置 > 全局配置 > 组件默认值

    当前支持的全局配置

    1. {
    2.     provide: NZ_MODAL_CONFIG,
    3.     useValue: {
    4.         nzMask?: boolean; // 是否展示遮罩
    5.         nzMaskClosable?: boolean; // 点击蒙层是否允许关闭
    6.     }
    7. }

    注：全局配置并无默认值，因为nzMask和nzMaskClosable默认值存在于组件中

    ModalButtonOptions（用于自定义底部按钮）

    可将此类型数组传入 nzFooter，用于自定义底部按钮。

    按钮配置项如下（与button组件保持一致）：

    1. nzFooter: [{
    2.   label: string; // 按钮文本
    3.   type?: string; // 类型
    4.   shape?: string; // 形状
    5.   ghost?: boolean; // 是否ghost
    6.   size?: string; // 大小
    7.   autoLoading?: boolean; // 默认为true，若为true时，当onClick返回promise时此按钮将自动置为loading状态
    9.   // 提示：下方方法的this指向该配置对象自身。当nzContent为组件类时，下方方法传入的contentComponentInstance参数为该组件类的实例
    10.   // 是否显示该按钮
    11.   show?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
    12.   // 是否显示为loading
    13.   loading?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
    14.   // 是否禁用
    15.   disabled?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
    16.   // 按钮点击回调
    17. }]

    以上配置项也可在运行态实时改变，来触发按钮行为改变。

    另一种自定义页脚按钮的方式。