有时候需要频繁使用提示框,但是使用一次的代码量太多,看起来很不清爽,且每次都要写确认,取消。如下
this.$confirm({
title: '提示',
content: '确认删除此条内容吗',
okText:'确定',
cancelText:'取消',
onOk: async()=> {
NProgress.start()
let {data:{success}}=await this.$post('/sys/removest',{ id
})
if (success) {
this.$message.success('删除成功');
this.getList()}
NProgress.done()
}
});
由于this.$confirm()这个方法也是通过this点出来的,说明this都指向Vue,所以我就尝试把他封装在mixin中
$mc(title,content,onOk){
this.$confirm({
title,
content,
okText:'确定',
cancelText:'取消',
onOk
});
}
这样后面就可以在组件中这样使用
this.$mc('提示','删除后无法恢复',async ()=>{
NProgress.start()
let {data:{success}}=await this.$post('/sys/removest',{ id})
if (success) {
this.$message.success('删除成功');
this.getList()
}
NProgress.done()
})
但是传入回调感觉还是很乱,可以在mixin中使用promise来优化
$mc(title,content){
return new Promise((resolve) => {
this.$confirm({
title,
content,
okText:'确定',
cancelText:'取消',
onOk(){
resolve()
}
});
})
}
这样$mc()方法就是一个promise对象,只有点击确定按钮才调用resolve,用户不点击确定按钮,await后代码就不执行。以后在组件中调用时就会很方便,直接在后面写所想做的事就可以了。
async del(id) {
await this.$mc('提示','删除后无法恢复')
NProgress.start()
let {data:{success}}=await this.$post('/sys/removest',{id})
if (success) {
this.$message.success('删除成功');
this.getList()
}
NProgress.done()
}
```