diff --git a/packages/theme/src/services/modal/modal.helper.ts b/packages/theme/src/services/modal/modal.helper.ts index ce155caa1..8ea063c08 100644 --- a/packages/theme/src/services/modal/modal.helper.ts +++ b/packages/theme/src/services/modal/modal.helper.ts @@ -7,6 +7,8 @@ import { deepMerge } from '@delon/util/other'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; import { ModalOptions, NzModalService } from 'ng-zorro-antd/modal'; +const CLS_DRAG = 'MODAL-DRAG'; + export interface ModalHelperOptions { /** 大小;例如:lg、600、80%,默认:`lg` */ size?: 'sm' | 'md' | 'lg' | 'xl' | '' | number | string; @@ -39,7 +41,6 @@ export interface ModalHelperDragOptions { @Injectable({ providedIn: 'root' }) export class ModalHelper { private document: Document; - private dragClsPrefix = 'MODAL-DRAG'; constructor( private srv: NzModalService, @@ -54,7 +55,7 @@ export class ModalHelper { const modalEl = wrapEl.firstChild as HTMLDivElement; const handelEl = options.handleCls ? wrapEl.querySelector(options.handleCls) : null; if (handelEl) { - handelEl.classList.add(`${this.dragClsPrefix}-HANDLE`); + handelEl.classList.add(`${CLS_DRAG}-HANDLE`); } return this.drag @@ -95,36 +96,36 @@ export class ModalHelper { ); return new Observable((observer: Observer) => { const { size, includeTabs, modalOptions, drag, useNzData } = options as ModalHelperOptions; - let cls = ''; + let cls: string[] = []; let width = ''; if (size) { if (typeof size === 'number') { width = `${size}px`; } else if (['sm', 'md', 'lg', 'xl'].includes(size)) { - cls = `modal-${size}`; + cls.push(`modal-${size}`); } else { width = size; } } if (includeTabs) { - cls += ' modal-include-tabs'; + cls.push(`modal-include-tabs`); } if (modalOptions && modalOptions.nzWrapClassName) { - cls += ` ${modalOptions.nzWrapClassName}`; + cls.push(modalOptions.nzWrapClassName); delete modalOptions.nzWrapClassName; } let dragOptions: ModalHelperDragOptions | null; - let dragWrapCls = `${this.dragClsPrefix}-${+new Date()}`; + let dragWrapCls = `${CLS_DRAG}-${+new Date()}`; let dragRef: DragRef | null; if (drag != null && drag !== false) { dragOptions = { handleCls: `.modal-header, .ant-modal-title`, ...(typeof drag === 'object' ? drag : {}) }; - cls += ` ${this.dragClsPrefix} ${dragWrapCls}`; + cls.push(CLS_DRAG, dragWrapCls); } const subject = this.srv.create({ - nzWrapClassName: cls, + nzWrapClassName: cls.join(' '), nzContent: comp, nzWidth: width ? width : undefined, nzFooter: null, diff --git a/packages/theme/system/antd/_modal.less b/packages/theme/system/antd/_modal.less index 65037b972..bae9be323 100644 --- a/packages/theme/system/antd/_modal.less +++ b/packages/theme/system/antd/_modal.less @@ -124,6 +124,8 @@ } } -.MODAL-DRAG-HANDLE { - cursor: move; +.MODAL-DRAG { + &-HANDLE { + cursor: move; + } }