From f754e915ff3b14d7d30aae43c8dd3d0c22b11ee5 Mon Sep 17 00:00:00 2001
From: Guoyuanqiang <guoyuanqiang2008@126.com>
Date: Tue, 8 Jan 2019 15:45:17 +0800
Subject: [PATCH 1/2] perf(module: actionsheet): perf actionsheet with cdk

---
 .../action-sheet-options.provider.ts          |  5 +-
 .../action-sheet/action-sheet.component.html  | 82 +++++++++----------
 .../action-sheet.component.spec.ts            | 50 ++++++-----
 .../action-sheet/action-sheet.component.ts    | 25 ++----
 .../action-sheet/action-sheet.service.ts      | 53 ++++++------
 components/modal/modal.module.ts              |  1 -
 6 files changed, 106 insertions(+), 110 deletions(-)

diff --git a/components/action-sheet/action-sheet-options.provider.ts b/components/action-sheet/action-sheet-options.provider.ts
index 14f12f65..48fcdf65 100644
--- a/components/action-sheet/action-sheet-options.provider.ts
+++ b/components/action-sheet/action-sheet-options.provider.ts
@@ -2,8 +2,8 @@ import { Injectable, TemplateRef } from '@angular/core';
 
 @Injectable()
 export class ActionSheetOptions {
-  prefixCls?: string;
-  maskClosable?: boolean;
+  prefixCls?: string = 'am-action-sheet';
+  maskClosable?: boolean = true;
   cancelButtonIndex?: number;
   destructiveButtonIndex?: number;
   title?: string | TemplateRef<any>;
@@ -22,6 +22,7 @@ export class ShareOption {
 @Injectable()
 export class ShareActionSheetWithOptions extends ActionSheetOptions {
   options: ShareOption[] | ShareOption[][];
+  cancelButtonText?: string = 'Cancel';
 }
 
 @Injectable()
diff --git a/components/action-sheet/action-sheet.component.html b/components/action-sheet/action-sheet.component.html
index c1fc6bf1..442a9983 100644
--- a/components/action-sheet/action-sheet.component.html
+++ b/components/action-sheet/action-sheet.component.html
@@ -1,74 +1,74 @@
-<div class="{{props.prefixCls}}-mask {{maskTransitionName}}"></div>
-<div class="{{props.prefixCls}}-wrap {{transitionName}}" (click)="onPress(-1, 0, $event)">
+<div class="{{option.prefixCls}}-mask {{option.maskTransitionName}}"></div>
+<div role="dialog" class="{{option.prefixCls}}-wrap {{option.transitionName}}" (click)="option.maskClose(-1, 0, $event)">
   <div role="document"
-       class="{{props.prefixCls}}"
-       [ngClass]="showShare(flag)">
-    <div class="{{props.prefixCls}}-content">
-      <button aria-label="Close" class="{{props.prefixCls}}-close">
-        <span class="{{props.prefixCls}}-close-x"></span>
+       class="{{option.prefixCls}}"
+       [ngClass]="showShare(option)">
+    <div class="{{option.prefixCls}}-content">
+      <button aria-label="Close" class="{{option.prefixCls}}-close">
+        <span class="{{option.prefixCls}}-close-x"></span>
       </button>
-      <div class="{{props.prefixCls}}-body">
+      <div class="{{option.prefixCls}}-body">
         <div>
-          <ng-container *ngIf="!isNoTitle(title)">
-            <ng-template *ngIf="isTemplateRef(title)" [ngTemplateOutlet]="title"></ng-template>
-            <h3 *ngIf="!isTemplateRef(title)" class="{{props.prefixCls}}-title">{{title}}</h3>
+          <ng-container *ngIf="!isNoTitle(option.title)">
+            <ng-template *ngIf="isTemplateRef(option.title)" [ngTemplateOutlet]="option.title"></ng-template>
+            <h3 *ngIf="!isTemplateRef(option.title)" class="{{option.prefixCls}}-title">{{option.title}}</h3>
           </ng-container>
-          <ng-container *ngIf="!isNoTitle(title)">
-            <ng-template *ngIf="isTemplateRef(message)" [ngTemplateOutlet]="message"></ng-template>
-            <div *ngIf="!isTemplateRef(message)" class="{{props.prefixCls}}-message">{{message}}</div>
+          <ng-container *ngIf="!isNoTitle(option.title)">
+            <ng-template *ngIf="isTemplateRef(option.message)" [ngTemplateOutlet]="option.message"></ng-template>
+            <div *ngIf="!isTemplateRef(option.message)" class="{{option.prefixCls}}-message">{{option.message}}</div>
           </ng-container>
-          <ng-container [ngSwitch]="flag">
-            <div *ngSwitchCase="'NORMAL'" class="{{props.prefixCls}}-button-list" role="group">
-              <ng-container *ngFor="let item of options; let i = index;">
-                  <TouchFeedBack class="{{props.prefixCls}}-button-list-item" [activeClassName]="activeClassName" >
-                      <div *ngIf="destructiveButtonIndex !== i && cancelButtonIndex !== i"
-                           class="{{props.prefixCls}}-button-list-item"
-                           (click)="onPress(i, 0, $event)"
+          <ng-container [ngSwitch]="option.flag">
+            <div *ngSwitchCase="'NORMAL'" class="{{option.prefixCls}}-button-list" role="group">
+              <ng-container *ngFor="let item of option.options; let i = index;">
+                  <div TouchFeedbackDirective class="{{option.prefixCls}}-button-list-item" [className]="setActiveClassName(option, 'button-list-item')">
+                      <div *ngIf="option.destructiveButtonIndex !== i && option.cancelButtonIndex !== i"
+                           class="{{option.prefixCls}}-button-list-item"
+                           (click)="option.onPress(i, 0, $event)"
                       >
                         {{item}}
                       </div>
-                      <div *ngIf="destructiveButtonIndex === i"
-                           class="{{props.prefixCls}}-button-list-item {{props.prefixCls}}-destructive-button"
-                           (click)="onPress(i, 0, $event)"
+                      <div *ngIf="option.destructiveButtonIndex === i"
+                           class="{{option.prefixCls}}-button-list-item {{option.prefixCls}}-destructive-button"
+                           (click)="option.onPress(i, 0, $event)"
                       >
                         {{item}}
                       </div>
-                      <div *ngIf="cancelButtonIndex === i"
-                           class="{{props.prefixCls}}-button-list-item {{props.prefixCls}}-cancel-button"
-                           (click)="onPress(i, 0, $event)"
+                      <div *ngIf="option.cancelButtonIndex === i"
+                           class="{{option.prefixCls}}-button-list-item {{option.prefixCls}}-cancel-button"
+                           (click)="option.onPress(i, 0, $event)"
                       >
                         {{item}}
-                        <span class="{{props.prefixCls}}-cancel-button-mask"></span>
+                        <span class="{{option.prefixCls}}-cancel-button-mask"></span>
                       </div>
-                  </TouchFeedBack>
+                  </div>
               </ng-container>
             </div>
-            <div *ngSwitchCase="'SHARE'" class="{{props.prefixCls}}-share {{props.prefixCls}}-share-content">
-              <div *ngIf="!isArray(options, options[0])" class="{{props.prefixCls}}-share-list">
-                <ng-container *ngFor="let item of options; let i = index;">
-                  <div class="{{props.prefixCls}}-share-list-item" (click)="onPress(i, 0, $event)">
-                    <div class="{{props.prefixCls}}-share-list-item-icon">
+            <div *ngSwitchCase="'SHARE'" class="{{option.prefixCls}}-share {{option.prefixCls}}-share-content">
+              <div *ngIf="!isArray(option.options, option.options[0])" class="{{option.prefixCls}}-share-list">
+                <ng-container *ngFor="let item of option.options; let i = index;">
+                  <div class="{{option.prefixCls}}-share-list-item" (click)="option.onPress(i, 0, $event)">
+                    <div class="{{option.prefixCls}}-share-list-item-icon">
                       <ng-template *ngIf="isTemplateRef(item.icon)" [ngTemplateOutlet]="item.icon"></ng-template>
                       <div *ngIf="!isTemplateRef(item.icon)" [innerHTML]="item.icon | safeHTML"></div>
                     </div>
-                    <div class="{{props.prefixCls}}-share-list-item-title">{{item.title}}</div>
+                    <div class="{{option.prefixCls}}-share-list-item-title">{{item.title}}</div>
                   </div>
                 </ng-container>
               </div>
-              <ng-container *ngIf="isArray(options, options[0])">
-                <div *ngFor="let items of options; let rowIndex = index" class="{{props.prefixCls}}-share-list">
+              <ng-container *ngIf="isArray(option.options, option.options[0])">
+                <div *ngFor="let items of option.options; let rowIndex = index" class="{{option.prefixCls}}-share-list">
                   <ng-container *ngFor="let item of items; let i = index;">
-                    <div class="{{props.prefixCls}}-share-list-item" (click)="onPress(i, rowIndex, $event)">
-                      <div class="{{props.prefixCls}}-share-list-item-icon">
+                    <div class="{{option.prefixCls}}-share-list-item" (click)="option.onPress(i, rowIndex, $event)">
+                      <div class="{{option.prefixCls}}-share-list-item-icon">
                         <ng-template *ngIf="isTemplateRef(item.icon)" [ngTemplateOutlet]="item.icon"></ng-template>
                         <div *ngIf="!isTemplateRef(item.icon)" [innerHTML]="item.icon | safeHTML"></div>
                       </div>
-                      <div class="{{props.prefixCls}}-share-list-item-title">{{item.title}}</div>
+                      <div class="{{option.prefixCls}}-share-list-item-title">{{item.title}}</div>
                     </div>
                   </ng-container>
                 </div>
               </ng-container>
-              <div class="{{props.prefixCls}}-share-cancel-button">{{props.cancelButtonText}}</div>
+              <div TouchFeedbackDirective [className]="setActiveClassName(option, 'share-cancel-button')" class="{{option.prefixCls}}-share-cancel-button">{{option.cancelButtonText}}</div>
             </div>
           </ng-container>
         </div>
diff --git a/components/action-sheet/action-sheet.component.spec.ts b/components/action-sheet/action-sheet.component.spec.ts
index 4f09c25a..6f553604 100644
--- a/components/action-sheet/action-sheet.component.spec.ts
+++ b/components/action-sheet/action-sheet.component.spec.ts
@@ -1,11 +1,11 @@
 import { Component, ViewChild } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { dispatchTouchEvent } from '../core/testing';
-import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, fakeAsync, flush } from '@angular/core/testing';
 import { ActionSheetComponent } from './action-sheet.component';
 import { ActionSheet, ActionSheetModule, ButtonModule } from '../..';
 import { NgZorroAntdMobilePipesModule } from '../pipes/ng-zorro-antd-mobile.pipes.module';
-
+import { Overlay } from '@angular/cdk/overlay';
 describe('ActionSheetComponent', () => {
   let component: TestActionSheetBasicComponent;
   let fixture: ComponentFixture<TestActionSheetBasicComponent>;
@@ -16,7 +16,7 @@ describe('ActionSheetComponent', () => {
     TestBed.configureTestingModule({
       declarations: [TestActionSheetBasicComponent],
       imports: [NgZorroAntdMobilePipesModule, ActionSheetModule, ButtonModule],
-      providers: [ActionSheet]
+      providers: [ActionSheet, Overlay]
     }).compileComponents();
     TestBed.overrideModule(ActionSheetModule, {
       set: { entryComponents: [ActionSheetComponent, TestActionSheetBasicComponent] }
@@ -30,71 +30,77 @@ describe('ActionSheetComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should actionsheet work', () => {
+  it('should actionsheet work', fakeAsync(() => {
     const button = buttons[0].nativeElement;
     button.click();
     fixture.detectChanges();
+    flush();
     actionSheetEle = document.querySelector('actionsheet');
     expect(actionSheetEle.querySelector('.am-action-sheet-wrap').classList).toContain(
       'am-action-sheet-wrap',
       'actionsheet is work'
     );
-  });
+  }));
 
-  it('should options work', () => {
+  it('should options work', fakeAsync(() => {
     expect(actionSheetEle.querySelector('.am-action-sheet-button-list').children.length).toBe(
       component.dataList.length,
       'options is work'
     );
-  });
+  }));
 
-  it('should title work', () => {
+  it('should title work', fakeAsync(() => {
     expect(actionSheetEle.querySelector('.am-action-sheet-destructive-button').innerText).toBe(
       'Delete',
       'Delete is work'
     );
-  });
+  }));
 
-  it('should title work', () => {
+  it('should title work', fakeAsync(() => {
     expect(actionSheetEle.querySelector('.am-action-sheet-cancel-button').innerText).toBe('Cancel', 'Cancel is work');
-  });
+  }));
 
-  it('should maskClosable work', () => {
+  it('should maskClosable work', fakeAsync(() => {
     expect(actionSheetEle.querySelector('.am-action-sheet-mask').classList).toContain(
       'am-action-sheet-mask',
       'maskClosable is work'
     );
-  });
+  }));
 
-  it('should shareActionSheet work', () => {
+  it('should shareActionSheet work', fakeAsync(() => {
     const button = buttons[1].nativeElement;
     button.click();
     fixture.detectChanges();
-    actionSheetEle = document.querySelector('actionsheet');
+    flush();
+    actionSheetEle = document.getElementsByTagName('actionsheet')[1];
     expect(actionSheetEle.querySelector('.am-action-sheet-share-list')).toBeTruthy('shareactionsheet is work');
-  });
+  }));
 
-  it('should shareActionSheetMulpitleLine work', () => {
+  it('should shareActionSheetMulpitleLine work', fakeAsync(() => {
     const button = buttons[2].nativeElement;
     button.click();
     fixture.detectChanges();
-    actionSheetEle = document.querySelector('actionsheet');
+    flush();
+    actionSheetEle = document.getElementsByTagName('actionsheet')[2];
     expect(actionSheetEle.querySelector('.am-action-sheet-share-content').children.length).toBe(
       3,
       'shareActionSheetMulpitleLine is work'
     );
     actionSheetEle.querySelector('.am-action-sheet-share-list-item').click();
     fixture.detectChanges();
-  });
+    flush();
+  }));
 
-  it('should close work', () => {
+  it('should close work', fakeAsync(() => {
     const button = buttons[1].nativeElement;
     button.click();
     fixture.detectChanges();
-    actionSheetEle = document.querySelector('actionsheet');
+    flush();
+    actionSheetEle = document.getElementsByTagName('actionsheet')[1];
     actionSheetEle.querySelector('.am-action-sheet-share-list-item').click();
     fixture.detectChanges();
-  });
+    flush();
+  }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
diff --git a/components/action-sheet/action-sheet.component.ts b/components/action-sheet/action-sheet.component.ts
index 62bba0a8..1d3699f2 100644
--- a/components/action-sheet/action-sheet.component.ts
+++ b/components/action-sheet/action-sheet.component.ts
@@ -1,4 +1,4 @@
-import { Component, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { Component, TemplateRef, ViewEncapsulation, HostListener } from '@angular/core';
 
 @Component({
   selector: 'ActionSheet',
@@ -6,28 +6,19 @@ import { Component, TemplateRef, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None
 })
 export class ActionSheetComponent {
-  props = {
-    prefixCls: 'am-action-sheet',
-    cancelButtonText: '取消'
-  };
-  flag: string = '';
-  title: string = '';
-  message: string = '';
-  transitionName: string = '';
-  maskTransitionName: string = '';
-  activeClassName = [`${this.props.prefixCls}-button-list-item-active`];
-  options?: string[];
-  cancelButtonIndex?: number;
-  destructiveButtonIndex?: number;
-
+  option: any;
   constructor() {}
 
   onPress(index: any, rowIndex = 0, event) {}
-  showShare(flag) {
-    const cls = { [`${this.props.prefixCls}-share`]: flag === 'SHARE' };
+  showShare(option) {
+    const cls = { [`${option.prefixCls}-share`]: option.flag === 'SHARE' };
     return cls;
   }
 
+  setActiveClassName(option, suffix) {
+    return [`${option.prefixCls}-${suffix}-active`];
+  }
+
   isNoTitle(value: string | TemplateRef<any>) {
     return value === '' || value === null || value === undefined;
   }
diff --git a/components/action-sheet/action-sheet.service.ts b/components/action-sheet/action-sheet.service.ts
index a7729701..dd55cb20 100644
--- a/components/action-sheet/action-sheet.service.ts
+++ b/components/action-sheet/action-sheet.service.ts
@@ -1,4 +1,4 @@
-import { Injectable, ComponentRef, ComponentFactory, ApplicationRef, ComponentFactoryResolver } from '@angular/core';
+import { Injectable, ComponentRef, ComponentFactory, ApplicationRef } from '@angular/core';
 import { ActionSheetComponent } from './action-sheet.component';
 import {
   ActionCallBack,
@@ -6,29 +6,29 @@ import {
   ActionSheetWithOptions,
   ShareActionSheetWithOptions
 } from './action-sheet-options.provider';
-import { ActionSheetSubject } from './action-sheet-subject.service';
+import { PopupService } from '../core/core.module';
 
 const NORMAL = 'NORMAL';
 const SHARE = 'SHARE';
 function noop() {}
-
+@Injectable({
+  providedIn: 'root'
+})
 @Injectable()
-export class ActionSheet {
+export class ActionSheet extends PopupService {
   static compRef: ComponentRef<any> = null;
   static _actionSheetCompFactory: ComponentFactory<ActionSheetComponent> = null;
   static appRef: ApplicationRef = null;
+  static comRef: ComponentRef<ActionSheetComponent> = null;
 
   static instance = null;
-  constructor(private _appRef: ApplicationRef, private _cfr: ComponentFactoryResolver) {
-    ActionSheet.appRef = this._appRef;
-    ActionSheet._actionSheetCompFactory = this._cfr.resolveComponentFactory(ActionSheetComponent);
-  }
 
   static _initConfig(config: ActionSheetOptions, options: Object = {}): ActionSheetOptions {
     const props: ActionSheetOptions = new ActionSheetOptions();
     const optionalParams: string[] = [
       'prefixCls',
       'maskClosable',
+      'cancelButtonText',
       'cancelButtonIndex',
       'destructiveButtonIndex',
       'title',
@@ -38,7 +38,13 @@ export class ActionSheet {
       'maskTransitionName',
       'options'
     ];
-    config = Object.assign(options, config);
+    config = Object.assign(options, config, {
+      close: (): void => {
+        if (config.maskClosable) {
+          ActionSheet.closeWithAnimation(config.transitionName, config.maskTransitionName);
+        }
+      }
+    });
     optionalParams.forEach(key => {
       if (config[key] !== undefined) {
         props[key] = config[key];
@@ -47,15 +53,11 @@ export class ActionSheet {
     return props;
   }
 
-  static _open(props: ActionSheetOptions, factory: ComponentFactory<any>): ActionSheetSubject {
-    document.body.insertBefore(document.createElement(factory.selector), document.body.firstChild);
-    let subject: any;
-
-    ActionSheet.compRef = ActionSheet.appRef.bootstrap(factory);
-    ActionSheet.instance = ActionSheet.compRef.instance;
-    subject = ActionSheet.instance.subject;
-    Object.assign(ActionSheet.instance, props);
-    return subject;
+  static _open(props: ActionSheetOptions) {
+    setTimeout(() => {
+      ActionSheet.comRef =  ActionSheet.showPopup(ActionSheetComponent);
+      ActionSheet.comRef.instance.option = props;
+    }, 0);
   }
 
   static createActionSheet(
@@ -63,13 +65,13 @@ export class ActionSheet {
     config: ActionSheetWithOptions | ShareActionSheetWithOptions,
     callback: ActionCallBack
   ) {
-    const options: ActionSheetOptions = new ActionSheetOptions();
+    const options = flag === NORMAL ? new ActionSheetOptions() : new ShareActionSheetWithOptions();
     const transitionName = config.transitionName ? config.transitionName : options.transitionName;
     options.transitionName = `${transitionName}-enter ${transitionName}-enter-active`;
     const maskTransitionName = config.maskTransitionName ? config.maskTransitionName : options.maskTransitionName;
     options.maskTransitionName = `${maskTransitionName}-enter ${maskTransitionName}-enter-active`;
     const props = ActionSheet._initConfig(config, options);
-    Object.assign(props, { onPress: cb }, { flag: flag });
+    Object.assign(props, { onPress: cb }, { flag: flag }, { maskClose: props.maskClosable ? cb : () => {}});
     function cb(index: any, rowIndex = 0, event) {
       event.stopPropagation();
       const res = callback(index, rowIndex);
@@ -81,12 +83,12 @@ export class ActionSheet {
         ActionSheet.closeWithAnimation(transitionName, maskTransitionName);
       }
     }
-    return ActionSheet._open(props, ActionSheet._actionSheetCompFactory);
+    return ActionSheet._open(props);
   }
 
   static closeWithAnimation(transitionName, maskTransitionName) {
-    ActionSheet.instance.transitionName = `${transitionName}-leave ${transitionName}-leave-active`;
-    ActionSheet.instance.maskTransitionName = `${maskTransitionName}-leave ${maskTransitionName}-leave-active`;
+    ActionSheet.comRef.instance.option.transitionName = `${transitionName}-leave ${transitionName}-leave-active`;
+    ActionSheet.comRef.instance.option.maskTransitionName = `${maskTransitionName}-leave ${maskTransitionName}-leave-active`;
     setTimeout(() => {
       ActionSheet.close();
     }, 200);
@@ -101,9 +103,6 @@ export class ActionSheet {
   }
 
   static close() {
-    if (ActionSheet.compRef) {
-      ActionSheet.compRef.destroy();
-      ActionSheet.compRef = null;
-    }
+    ActionSheet.hidePopup();
   }
 }
diff --git a/components/modal/modal.module.ts b/components/modal/modal.module.ts
index 79bc91c9..7b5f6990 100644
--- a/components/modal/modal.module.ts
+++ b/components/modal/modal.module.ts
@@ -8,7 +8,6 @@ import { ButtonModule } from '../button/button.module';
 import { InputItemModule } from '../input-item/input-item.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AlertOptions } from './modal-options.provider';
-import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 @NgModule({
   imports: [CommonModule, ListModule, WingBlankModule, WhiteSpaceModule, ButtonModule, InputItemModule, FormsModule, ReactiveFormsModule],
   exports: [ModalComponent, ModalServiceComponent],

From f4f9da92f3e3aaa39b17af95728a6c7aff971352 Mon Sep 17 00:00:00 2001
From: Guoyuanqiang <guoyuanqiang2008@126.com>
Date: Tue, 8 Jan 2019 17:41:36 +0800
Subject: [PATCH 2/2] perf(module: actionsheet): perf actionsheet demo and docs

---
 components/action-sheet/demo/basic.ts      | 2 +-
 components/action-sheet/doc/index.zh-CN.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/action-sheet/demo/basic.ts b/components/action-sheet/demo/basic.ts
index 29a40c1c..46abd53e 100644
--- a/components/action-sheet/demo/basic.ts
+++ b/components/action-sheet/demo/basic.ts
@@ -16,7 +16,7 @@ import { ActionSheet, Toast } from 'ng-zorro-antd-mobile';
       </ng-template>
     </WingBlank>
   `,
-  providers: [ActionSheet, Toast]
+  providers: [Toast]
 })
 export class DemoActionSheetBasicComponent {
   dataList = [
diff --git a/components/action-sheet/doc/index.zh-CN.md b/components/action-sheet/doc/index.zh-CN.md
index d550023c..77650b77 100755
--- a/components/action-sheet/doc/index.zh-CN.md
+++ b/components/action-sheet/doc/index.zh-CN.md
@@ -36,7 +36,7 @@ subtitle: 动作面板
 
 - options (array of `{icon: TemplateRef | innerHTML, title: string}`) - 分享按钮列表 (required)
     - 可以是二维数组，能显示多行按钮，例如`[[{icon,title},...],...]`表示两行两列。当为二维数组时`callback`有两个参数，第一个为`列`序列、第二个为`行`序列。
-- cancelButtonText (string) - 取消按钮文案，默认为`取消`
+- cancelButtonText (string) - 取消按钮文案，默认为`Cancel`
 - title (string) - 顶部标题
 - message (string/React.element) - 顶部标题下的简要消息
 - maskClosable (bool) - 点击蒙层是否允许关闭，默认允许