Aurelia框架下KendoUI confirm对话框按钮排序及适配实现问题

修复方案 #

你自定义actions后Kendo不会自动触发默认确认/取消逻辑，需要手动控制弹窗关闭和返回的promise状态，修改逻辑如下：

1. 两个action回调改用箭头函数获取外层kConfirm实例，Cancel按钮点击时将promise置为false状态、OK按钮点击时将promise置为true状态，同时关闭弹窗
2. 官方示例里的secondaryButtonCloseFunction和primaryButtonCloseFunction是示例自定义的传参属性，不是Kendo内置API，不需要额外适配，如果你需要支持自定义点击回调，可以自己给confirm方法增加对应入参即可。

修改后的完整代码：

confirm(message: string, title?: any): JQueryPromise<any> {                    
    message = this.javaScriptCommentToHTML(message);
    title = this.checkForTitle(title);
    let dialog = $('<div></div>').appendTo(document.body);
    let kConfirm: kendo.ui.Confirm;
    let options: any = {
        buttonLayout: 'normal',
        title: title,
        content: message,
        actions: [
            {
                text: "Cancel",
                primary: false,
                cssClass: "k-button-cancel",
                action: (e) => {
                    kConfirm.close();
                    // 对应原生取消行为，返回结果为false
                    (kConfirm.result as any).resolve(false);
                    // 阻止默认事件避免重复触发逻辑
                    return false;
                }
            },
            {
                text: "OK",
                primary: true,
                cssClass: "k-button-ok",
                action: (e) => {
                    kConfirm.close();
                    // 对应原生确认行为，返回结果为true
                    (kConfirm.result as any).resolve(true);
                    return false;
                }
            }
        ],
        close: function (e) {
            kConfirm.wrapper.remove();
            // 兼容右上角关闭按钮场景，默认返回取消状态
            (kConfirm.result as any).resolve(false);
        }
    };
    kConfirm = dialog.kendoConfirm(options).data('kendoConfirm');
    kConfirm.open();
    return kConfirm.result;
}

如果需要支持自定义点击回调，可以给方法增加入参，示例如下：

// 新增自定义回调入参
confirm(message: string, title?: any, onCancel?: () => void, onConfirm?: () => void): JQueryPromise<any> {
    // 其余逻辑不变
    actions: [
        {
            text: "Cancel",
            action: (e) => {
                onCancel?.(); // 先执行自定义取消回调
                kConfirm.close();
                (kConfirm.result as any).resolve(false);
                return false;
            }
        },
        {
            text: "OK",
            action: (e) => {
                onConfirm?.(); // 先执行自定义确认回调
                kConfirm.close();
                (kConfirm.result as any).resolve(true);
                return false;
            }
        }
    ]
    // 其余逻辑不变
}

内容的提问来源于stack exchange，提问作者GoDogGo