iview中解决Modal 对话框连续调用两次后,第二次闪一下就消失的问题

2021-05-21 104点热度 0人点赞 0条评论

问题描述

iView中用到一个this.$Modal.confirm对话框,确认后再执行确定动作后,弹出this.$Modal.info对话框告诉用户执行结果,结果是第二个info对话框闪了以下就消失了;

问题分析

debug发现,如果confirm后,执行的动作花的时间长一点的话,第二个info对话框就能显示了!估计是这里的Modal采用的隐藏开关用的同一个变量,第一个消失的时候,导致第二个也跟着消失了。

解决办法

既然执行的动作花的时间长一点就能解决,也就是说只要给第一个对话框足够的时间让它消失,再执行下一步的动作就可以了,我们可以在第一个对话框onOk事件里,套一个timeout,经过研究,发现如果timeout设定为500ms就可以了,代码如下:

reportClicked: function() {
    var _this = this;
    // 第一个Modal对话框
    this.$Modal.confirm({
        title: '确认',
        content: '确定要怎么怎么样吗?',
        onOk: function () {
            // 等待500ms后,再指定doReport
            setTimeout(function(){_this.doReport()}, 500);
        }
    });
},
doReport: function() {
    var _this = this;
    var payload = {type: "1"};
    axios.post('centers/report', Qs.stringify(payload))
        .then(function (response) {
            //第二个Modal对话框这时候肯定能弹出了
            _this.$Modal.info({
                title: '结果',
                closable: true,
                content: response.message
            });
        })
        .catch(function (error) {
            _this.reporting = false;
            _this.$Message.error("错误,请稍后再试:" + error.status);
        });
}

 

admin

这个人很懒,什么都没留下

文章评论

*

code