vue Element-UI message或this.$message 主动关闭 - Kaiqisan

vue element-ui message或this.$message 主动关闭

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 在我实际的项目过程中，赶巧不巧碰到服务器特别迟缓的时候，有时候在向后端请求信息的时候，会卡顿特别久才能弹出“提交成功”，在提交成功弹出之前，页面就一直僵持在那里，这对用户非常不友好，于是，借此机会，我打算增加一个加载中动画效果。于是，我打算使用element-ui 的 message 功能模块来做一个“加载中”效果，提示用户的信息正在提交中。

简答

this.$message.close() // 不行

let msg = this.$message({
	....
})
msg.close() // 行

详解

this.$message({
	duration: 0,   // 设置为0就可以使永久停留
	type: 'warning',
	message: '等待中....'
})

现在，信息加载已经完成了，我现在要把这个弹出框关掉

this.$message.close() // 官网指定方法

然而这样并不行，因为您还给这个弹出框指定一个参数来接收，所以它是匿名的，上面的方法并不能找到需要关闭的弹出框。就像setTimeout方法一样，如果没有一个接收的参数，它就永远无法被销毁。

let timer = setTimeout(() => {
    console.log('ok')
    clearTimeout(timer) // 找到计时器传入的参数就可以删除，否则就无法删除。
}, 1000)

所以，下面这种方法才是OK的。

// 点击按钮后触发
openMsg() {
    this.msg = this.$message({ // 需要一个参数接收这个$message(msg来自data)
        duration: 0,
        type: 'warning',
        message: '等待中....'
    })
    // 使用延时器来模拟请求的异步方法
    setTimeout(() => {
        this.msg.close()  // 这样才能正确关闭
        this.msg = this.$message({
            duration: 1000,
            type: 'success',
            message: '提交成功'
        })
    }, 2000)
}

显示效果

下面为更加完美的方法，更加适用于项目，程序也更加健壮----页面只能容许一个弹出框的存在。克服了 message 中 close() 只能关闭一个弹框的缺点。

openMsg() {
    if (this.status) { // 为事件加锁，点击之后，在动作没有完成之前不允许再次触发事件
        this.status = false
        if (this.msg) {	// 防止第一次点击报错
		    this.msg.close()
		}
        this.msg = this.$message({
            duration: 0,
            type: 'warning',
            message: '等待中....'
        })
        setTimeout(() => {
            this.msg.close()
            this.msg = this.$message({
                duration: 1000,
                type: 'success',
                message: '提交成功'
            })
            this.status = true
        }, 2000)
    }
}

展示效果

总结

给大伙一个建议，如果觉得官方文档的方法失效的话，请第一时间去百度，验证自己的方法是否有误（大半的错误是自己引起的），如果百度有解决方法的话就直接拿过来，吃个教训；如果没有的话就去专业社区寻求求助，或者去专门讨论这个专项内容的群里面寻找解决方案。