116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
/**
|
|
* 弹出框选项
|
|
*/
|
|
interface PopupOptions {
|
|
/** 弹出框内容，可以是文本或者 html 元素 */
|
|
content: string | HTMLElement;
|
|
/** 弹出框标题，可以是文本或者 html 元素 */
|
|
title: string | HTMLElement;
|
|
|
|
/** 是否持久化显示 */
|
|
persistent?: boolean;
|
|
/** 是否包含遮罩层，默认为 `true` */
|
|
mask?: boolean;
|
|
/** 遮罩层 z-index */
|
|
zIndex?: number;
|
|
/** 是否在获取焦点时修改 z-index */
|
|
changeZIndex?: boolean;
|
|
/** 是否允许关闭 */
|
|
closable?: boolean;
|
|
/** 是否允许移动 */
|
|
movable?: boolean;
|
|
/** 是否允许修改大小 */
|
|
resizable?: boolean;
|
|
/** 最小宽度，默认 200 */
|
|
minWidth?: number;
|
|
/** 最小高度，默认 200 */
|
|
minHeight?: number;
|
|
/** 是否允许弹出框收折 */
|
|
collapsable?: boolean;
|
|
/** 弹出框的按钮定义集合 */
|
|
buttons?: PopupButton[];
|
|
|
|
/**
|
|
* 遮罩层显示或者隐藏时的回调函数
|
|
* @param this 当前 popup 对象
|
|
* @param masking 显示或隐藏遮罩层
|
|
*/
|
|
onMasking?: (this: Popup, masking: boolean) => void;
|
|
/**
|
|
* 移动结束时的回调函数
|
|
* @param this 当前 popup 对象
|
|
*/
|
|
onMoveEnded?: (this: Popup) => void;
|
|
/**
|
|
* 修改大小开始时的回调函数
|
|
* @param this 当前 popup 对象
|
|
*/
|
|
onResizeStarted?: (this: Popup) => void;
|
|
/**
|
|
* 修改大小中的回调函数
|
|
* @param this 当前 popup 对象
|
|
* @param x 坐标 x
|
|
* @param y 坐标 y
|
|
* @param width 当前宽度
|
|
* @param height 当前高度
|
|
*/
|
|
onResizing?: (this: Popup, x: number, y: number, width: number, height: number) => void;
|
|
/**
|
|
* 修改大小结束时的回调函数
|
|
* @param this 当前 popup 对象
|
|
*/
|
|
onResizeEnded?: (this: Popup) => void;
|
|
/**
|
|
* 弹出框关闭时的回调函数
|
|
*/
|
|
resolve?: (this: Popup, result: { result: any, popup: Popup }) => void;
|
|
}
|
|
|
|
export class Popup {
|
|
constructor(opts?: PopupOptions);
|
|
|
|
get container(): HTMLElement;
|
|
|
|
get title(): string;
|
|
set title(title: string);
|
|
|
|
get loading(): boolean;
|
|
set loading(flag: boolean);
|
|
|
|
get rect(): { collapsed: boolean, left: number, top: number, width: number, height: number };
|
|
set rect(r: { collapsed?: boolean, left?: number, top?: number, width?: number, height?: number });
|
|
|
|
close(result?: any, animation?: boolean): void;
|
|
create(): HTMLDivElement;
|
|
show(parent?: HTMLElement, hidden?: boolean): Promise<HTMLElement> | undefined;
|
|
}
|
|
|
|
interface PopupButton {
|
|
className?: string;
|
|
tabIndex?: number;
|
|
key: string;
|
|
text: string;
|
|
trigger: (this: Popup) => boolean | Promise<boolean>;
|
|
}
|
|
|
|
interface PopupIconTypes {
|
|
'info': 'info-circle';
|
|
'information': 'info-circle';
|
|
'warn': 'exclamation-triangle';
|
|
'warning': 'exclamation-triangle';
|
|
'question': 'question-circle';
|
|
'error': 'times-circle';
|
|
}
|
|
|
|
interface PopupButtonResult {
|
|
result: string;
|
|
popup: Popup;
|
|
}
|
|
|
|
export function createPopup(title: string | HTMLElement, content: string | HTMLElement, ...buttons: PopupButton[]): Popup
|
|
|
|
export function resolvePopup(wrapper: string | HTMLElement, callback?: Function, removable?: boolean, zIndex?: number): Popup
|
|
|
|
export function showAlert(title: string | HTMLElement, message: string, iconType?: keyof PopupIconTypes, parent?: HTMLElement): Promise<void>
|
|
|
|
export function showConfirm(title: string | HTMLElement, content: string | HTMLElement, buttons: PopupButton[], iconType?: keyof PopupIconTypes, parent?: HTMLElement): Promise<PopupButtonResult> |