确认框是一个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);
    })
}

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐