Vue确认框和弹出框对比实现

Vue确认框和弹出框对比实现

如果是要有选择，使用确认框
如果只是简单的提示，用弹出框

Vue确认框实现

this.$alert('你确定要删除吗？', '提示',{
                confirmButtonText: '确定',
                callback: () => {
                    studentDel(row.id).then(res => {
                        console.log(res);
                        if(res.data.status === 200){
                            this.$message({message: res.data.message, type: 'success'})
                            this.getData();
                        }else{
                            this.$message({message: res.data.message, type: 'error'})
                        }
                    });
                }
            })

Vue确认框实现

this.$confirm("你确定要删除吗？", "提示", {
                iconClass: "el-icon-question", //自定义图标样式
                confirmButtonText: "确认", //确认按钮文字更换
                cancelButtonText: "取消", //取消按钮文字更换
                showClose: true, //是否显示右上角关闭按钮
            })
            .then(function () {  //选择确认进入此方法
                //确认操作
                console.log('1');
                return studentDel(row.id)
            })
            .then((res) => {  //上一个then()执行成功后执行后续方法
                console.log('2');
                console.log(res);
                if(res.data.status === 200){
                    this.$message({message: res.data.message, type: 'success'})
                    this.getData();
                }else{
                    this.$message({message: res.data.message, type: 'error'})
                }
            })
            .catch(function (err) { //取消按钮,X号，都会视为erro
                //捕获异常
                console.log('3');
                console.log(err);
            });