element-ui MessageBox 弹框自定义内容，点击取消时控制台报错

最新推荐文章于 2025-07-23 22:54:08 发布

原创最新推荐文章于 2025-07-23 22:54:08 发布 · 4.2k 阅读

3 ·

CC 4.0 BY-SA版权

项目经验同时被 2 个专栏收录

38 篇文章

订阅专栏

element-ui

8 篇文章

订阅专栏

在使用Element-UI的MessageBox弹框并尝试自定义内容时，遇到点击取消按钮导致控制台出现错误的问题。通过深入研究，发现解决方案在于正确处理回调函数，确保在取消操作时能避免未定义的引用错误。修复此问题将提升组件的稳定性和用户体验。

在这里插入图片描述
解决：加上.catch(()=>{ })

this.$msgbox({
                title: '消息',
                message: h('p', null, '是否同意张三的500元提现申请？'),
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        setTimeout(() => {
                            done();
                            setTimeout(() => {
                                instance.confirmButtonLoading = false;
                            }, 300);
                        }, 3000);
                    } else {
                        done();
                    }
                },
            }).then(action => {
                this.$message({
                    type: 'info',
                    message: 'action: ' + action,
                });
            }).catch(()=>{
                
            });