richard/mp-xieyingeng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：支持二次确认弹窗确认、取消按钮

Browse Source
This commit is contained in:
richarjiang
2026-05-12 20:10:00 +08:00
parent 8b27dc7bc5
commit 078c8578fd
4 changed files with 1197 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
assets/prefabs/CommonModal.ts
View File

@@ -8,8 +8,10 @@ export type CommonModalAction = () => void | boolean;
export interface CommonModalCallbacks {
/** 点击关闭按钮回调，返回 false 可阻止默认关闭 */
onClose?: CommonModalAction;
/** 点击主按钮回调，返回 false 可阻止默认关闭 */
/** 点击确认按钮回调，返回 false 可阻止默认关闭 */
onConfirm?: CommonModalAction;
/** 点击取消按钮回调，返回 false 可阻止默认关闭 */
onCancel?: CommonModalAction;
}
export interface CommonModalParams extends CommonModalCallbacks {
@@ -17,14 +19,16 @@ export interface CommonModalParams extends CommonModalCallbacks {
title?: string;
/** 弹窗内容 */
content?: string;
/** 主按钮文案 */
buttonHint?: string;
/** 主按钮文案别名，方便业务侧按 buttonText 调用 */
buttonText?: string;
/** 确认按钮文案 */
buttonConfirm?: string;
/** 取消按钮文案，传入后展示双按钮区域 */
buttonCancel?: string;
/** 点击关闭按钮后是否自动关闭弹窗，默认 true */
closeOnClose?: boolean;
/** 点击主按钮后是否自动关闭弹窗，默认 true */
/** 点击确认按钮后是否自动关闭弹窗，默认 true */
closeOnConfirm?: boolean;
/** 点击取消按钮后是否自动关闭弹窗，默认 true */
closeOnCancel?: boolean;
/** 关闭时是否销毁节点，默认 true */
destroyOnClose?: boolean;
/** 弹窗层级，默认 CommonModal.MODAL_Z_INDEX */
@@ -37,7 +41,8 @@ export class CommonModal extends BaseModal {
private static readonly DEFAULT_TITLE = '温馨提示';
private static readonly DEFAULT_CONTENT = '';
private static readonly DEFAULT_BUTTON_HINT = '确定';
private static readonly DEFAULT_BUTTON_CONFIRM = '确定';
private static readonly DEFAULT_BUTTON_CANCEL = '取消';
@property({ type: Label, tooltip: '标题文本' })
titleLabel: Label | null = null;
@@ -45,22 +50,40 @@ export class CommonModal extends BaseModal {
@property({ type: Label, tooltip: '内容文本' })
contentLabel: Label | null = null;
@property({ type: Label, tooltip: '主按钮文本' })
buttonHintLabel: Label | null = null;
@property({ type: Label, tooltip: '确认按钮文本' })
buttonConfirmLabel: Label | null = null;
@property({ type: Label, tooltip: '双按钮确认文本' })
actionConfirmLabel: Label | null = null;
@property({ type: Label, tooltip: '取消按钮文本' })
buttonCancelLabel: Label | null = null;
@property({ type: Node, tooltip: '关闭按钮节点' })
closeBtn: Node | null = null;
@property({ type: Node, tooltip: '主按钮节点' })
buttonHint: Node | null = null;
@property({ type: Node, tooltip: '单确认按钮节点' })
buttonConfirm: Node | null = null;
@property({ type: Node, tooltip: '双按钮容器节点' })
actionDouble: Node | null = null;
@property({ type: Node, tooltip: '双按钮确认节点' })
actionConfirm: Node | null = null;
@property({ type: Node, tooltip: '双按钮取消节点' })
actionCancel: Node | null = null;
private _title: string = CommonModal.DEFAULT_TITLE;
private _content: string = CommonModal.DEFAULT_CONTENT;
private _buttonHintText: string = CommonModal.DEFAULT_BUTTON_HINT;
private _buttonConfirmText: string = CommonModal.DEFAULT_BUTTON_CONFIRM;
private _buttonCancelText: string = CommonModal.DEFAULT_BUTTON_CANCEL;
private _callbacks: CommonModalCallbacks = {};
private _closeOnClose: boolean = true;
private _closeOnConfirm: boolean = true;
private _closeOnCancel: boolean = true;
private _destroyOnClose: boolean = true;
private _useDoubleActions: boolean = false;
private _screenSize: Size | null = null;
private _loaded: boolean = false;
@@ -71,7 +94,7 @@ export class CommonModal extends BaseModal {
* CommonModal.show(this.commonModalPrefab, {
* title: '提示',
* content: '是否继续？',
* buttonHint: '继续',
* buttonConfirm: '继续',
* onConfirm: () => this.startGame()
* });
*/
@@ -116,14 +139,18 @@ export class CommonModal extends BaseModal {
setConfig(params: CommonModalParams = {}): void {
this._title = params.title ?? CommonModal.DEFAULT_TITLE;
this._content = params.content ?? CommonModal.DEFAULT_CONTENT;
this._buttonHintText = params.buttonHint ?? params.buttonText ?? CommonModal.DEFAULT_BUTTON_HINT;
this._buttonConfirmText = params.buttonConfirm ?? CommonModal.DEFAULT_BUTTON_CONFIRM;
this._buttonCancelText = params.buttonCancel ?? CommonModal.DEFAULT_BUTTON_CANCEL;
this._callbacks = {
onClose: params.onClose,
onConfirm: params.onConfirm
onConfirm: params.onConfirm,
onCancel: params.onCancel
};
this._closeOnClose = params.closeOnClose ?? true;
this._closeOnConfirm = params.closeOnConfirm ?? true;
this._closeOnCancel = params.closeOnCancel ?? true;
this._destroyOnClose = params.destroyOnClose ?? true;
this._useDoubleActions = this._shouldUseDoubleActions(params);
this._applyContent();
}
@@ -137,8 +164,14 @@ export class CommonModal extends BaseModal {
this._applyContent();
}
setButtonHint(buttonHint: string): void {
this._buttonHintText = buttonHint;
setButtonConfirm(buttonConfirm: string): void {
this._buttonConfirmText = buttonConfirm;
this._applyContent();
}
setButtonCancel(buttonCancel: string): void {
this._buttonCancelText = buttonCancel;
this._useDoubleActions = true;
this._applyContent();
}
@@ -193,16 +226,26 @@ export class CommonModal extends BaseModal {
this.animationNodes = this.animationNodes.length > 0 ? this.animationNodes : (panelNode ? [panelNode] : []);
this.closeBtn = this.closeBtn ?? this._findNode('dialogPanel/closeBtn');
this.buttonHint = this.buttonHint ?? this._findNode('dialogPanel/ButtonHint');
this.buttonConfirm = this.buttonConfirm ?? this._findNode('dialogPanel/ButtonConfirm');
this.actionDouble = this.actionDouble ?? this._findNode('dialogPanel/ActionDouble');
this.actionConfirm = this.actionConfirm ?? this._findNode('dialogPanel/ActionDouble/ButtonConfirm');
this.actionCancel = this.actionCancel ?? this._findNode('dialogPanel/ActionDouble/ButtonCancel');
this.titleLabel = this.titleLabel ?? this._findNode('dialogPanel/Title')?.getComponent(Label) ?? null;
this.contentLabel = this.contentLabel ?? this._findNode('dialogPanel/Content')?.getComponent(Label) ?? null;
this.buttonHintLabel = this.buttonHintLabel
?? this._findNode('dialogPanel/ButtonHint/Label')?.getComponent(Label)
this.buttonConfirmLabel = this.buttonConfirmLabel
?? this._findNode('dialogPanel/ButtonConfirm/Label')?.getComponent(Label)
?? null;
this.actionConfirmLabel = this.actionConfirmLabel
?? this._findNode('dialogPanel/ActionDouble/ButtonConfirm/Label')?.getComponent(Label)
?? null;
this.buttonCancelLabel = this.buttonCancelLabel
?? this._findNode('dialogPanel/ActionDouble/ButtonCancel/Label')?.getComponent(Label)
?? null;
}
private _applyContent(): void {
this._resolveNodes();
this._applyActionMode();
if (this.titleLabel) {
this.titleLabel.string = this._title;
@@ -212,8 +255,16 @@ export class CommonModal extends BaseModal {
this.contentLabel.string = this._content;
}
if (this.buttonHintLabel) {
this.buttonHintLabel.string = this._buttonHintText;
if (this.buttonConfirmLabel) {
this.buttonConfirmLabel.string = this._buttonConfirmText;
}
if (this.actionConfirmLabel) {
this.actionConfirmLabel.string = this._buttonConfirmText;
}
if (this.buttonCancelLabel) {
this.buttonCancelLabel.string = this._buttonCancelText;
}
}
@@ -235,8 +286,16 @@ export class CommonModal extends BaseModal {
this.closeBtn.on(Node.EventType.TOUCH_END, this._onCloseClick, this);
}
if (this.buttonHint) {
this.buttonHint.on(Node.EventType.TOUCH_END, this._onConfirmClick, this);
if (this.buttonConfirm) {
this.buttonConfirm.on(Node.EventType.TOUCH_END, this._onConfirmClick, this);
}
if (this.actionConfirm) {
this.actionConfirm.on(Node.EventType.TOUCH_END, this._onConfirmClick, this);
}
if (this.actionCancel) {
this.actionCancel.on(Node.EventType.TOUCH_END, this._onCancelClick, this);
}
}
@@ -245,8 +304,16 @@ export class CommonModal extends BaseModal {
this.closeBtn.off(Node.EventType.TOUCH_END, this._onCloseClick, this);
}
if (this.buttonHint?.isValid) {
this.buttonHint.off(Node.EventType.TOUCH_END, this._onConfirmClick, this);
if (this.buttonConfirm?.isValid) {
this.buttonConfirm.off(Node.EventType.TOUCH_END, this._onConfirmClick, this);
}
if (this.actionConfirm?.isValid) {
this.actionConfirm.off(Node.EventType.TOUCH_END, this._onConfirmClick, this);
}
if (this.actionCancel?.isValid) {
this.actionCancel.off(Node.EventType.TOUCH_END, this._onCancelClick, this);
}
}
@@ -264,6 +331,27 @@ export class CommonModal extends BaseModal {
}
}
private _onCancelClick(): void {
const shouldContinue = this._callbacks.onCancel?.();
if (shouldContinue !== false && this._closeOnCancel) {
this.close();
}
}
private _applyActionMode(): void {
if (this.buttonConfirm?.isValid) {
this.buttonConfirm.active = !this._useDoubleActions;
}
if (this.actionDouble?.isValid) {
this.actionDouble.active = this._useDoubleActions;
}
}
private _shouldUseDoubleActions(params: CommonModalParams): boolean {
return params.buttonCancel !== undefined;
}
private _findNode(path: string): Node | null {
const names = path.split('/').filter(Boolean);
let current: Node | null = this.node;