项目中总会遇到需要二次确认的操作
我的项目是vue + element-ui
正常写法
this.$confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
closeOnClickModal: false,
type: 'warning',
center: true
}).then(async () => {
const formData = {
'id': this.id,
};
let res = await this.$post('/aaa/bbb',formData)
if (res.code == 1) {
// do something
}
})
我憋了两个小时憋出来的新写法~~
// utils.js
/**
* 公用提示窗
*
* @export
* @param {string} [desc='确认操作'] 弹框提示文字
* @param {string} [title='提示'] 弹框标题
* @param {string} [confirmButtonName='确认'] 确认按钮文字
* @param {string} [cancelButtonName='取消'] 取消按钮文字
* @param {boolean} [distinguishCancelAndClose=false] 关系和取消是否执行同一方法
* @returns
*/
export function confirm(desc = '确认操作',title = '提示',confirmButtonName = '确认',cancelButtonName = '取消',distinguishCancelAndClose = false){
return this.$confirm(desc, title, {
confirmButtonText: confirmButtonName,
cancelButtonText: cancelButtonName,
distinguishCancelAndClose: distinguishCancelAndClose,
closeOnClickModal: false,
type: 'warning',
center: true
})
}
因为在使用confirm时点击确认的回调从.then中传入,所以我认为this.$confirm()会return出一个Promise对象,那么就可以使用await,来试一试
//xx.vue
submitSome(){
try{
await utils.confirm.call(this,'确定要删除吗?')
const formData = {
'id': this.id,
};
let res = await this.$post('/aaa/bbb',formData)
if (res.code == 1) {
// do something
}
}catch(error){
console.log(error);
}
}
此时如果点击取消,就不会继续执行await以后的代码,直接跳转到catch中
如果需要$confirm的关闭和取消有所区别
try {
await utils.confirm.call(this)
// do something
}catch (e){
if(e === 'close'){
// do something
}else if(e === 'cancel'){
// do other thing
}
}
结束啦~ 欢迎指正
我建了一个前端微信交流群,欢迎大家加入,qq中转群号:1076484243
网友评论