解决vue+el使用this.$confirm,不能阻断代码往下执行
前言在vue+element ui的前端框架中使用el的confirm弹窗,遇到一个问题,就是连续多个弹窗提示一些信息,要是点击确定继续向下执行,点击取消就退出整个方法。这时发现当代码执行到this.$confirm弹窗时,弹出弹窗后,继续执行了弹窗之后的代码,没有等到弹窗点击确定或是取消之后再执行。具体解决其实解决办法也很简单,因为this.$confirm也是一个promise方法,所以...
·
前言
在vue+element ui的前端框架中使用el的confirm弹窗,遇到一个问题,就是连续多个弹窗提示一些信息,要是点击确定继续向下执行,点击取消就退出整个方法。这时发现当代码执行到this.$confirm弹窗时,弹出弹窗后,继续执行了弹窗之后的代码,没有等到弹窗点击确定或是取消之后再执行。
具体解决
其实解决办法也很简单,因为this.$confirm也是一个promise方法,所以可以使用es6中的await等到返回结果。
await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。
......
if(await this.$confirm('是否保存修改?', '确认信息', {
distinguishCancelAndClose: true,
confirmButtonText: '保存',
cancelButtonText: '取消'
}).catch(() => {}) !== 'confirm') {
return
}
// 点击取消退出方法,点击保存则继续往下执行
// 若没有await,在弹出弹窗的同时就会接着往下执行
this.doSaveInfo()
......
后记
看官方文档学习一定要看仔细,看明白。认真学习promise和await。
更多推荐
已为社区贡献1条内容
所有评论(0)