vue3封装ElMessageBox.confirm(确认框),避免提示信息重复写代码。
·
确认框是一个Promise对象,与axios属于同种,我觉得所有Promise类的对象封装都可以参考此方法(有待验证)。
具体思路也不难。Promise对象可以在成功或失败时分别执行两个回调函数,我们写好这两个函数传递给封装的代码,在相应位置调用这两个函数即可。代码如下:
1、封装代码:
import { ElMessage, ElMessageBox } from "element-plus";
function confirmDelete(ok:Function){
ElMessageBox.confirm(
'将要删除本条记录,是否继续?',
'警告',
{
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
ok();
ElMessage({
type: 'success',
message: '删除成功!',
});
}).catch((err) => {
ElMessage({
type: 'info',
message: '取消操作'+err,
});
})
}
export {confirmDelete}
2、调用方式:
/**
* 删除数据
*/
const handleDelete = (index:number,row:any)=>{
confirmDelete(
()=>{ //这里只传了一个成功的函数,失败提示信息一致不用单独处理。
sendRequest("delete", `/department/delete/${row.id}`, null);
tableData.value.content.splice(index,1);
})
}
更多推荐
已为社区贡献4条内容
所有评论(0)