vueelement插件this.$confirm用法及说明(取消也可以发请求)
目录
element插件this.$confirm用法
场景：弹出框的两个按钮都能分别请求接口
vue项目如何使用this.$confirm
element插件this.$confirm用法 场景：弹出框的两个按钮都能分别请求接口最简单的弹出框就是“确定”“取消”，一般用户点击确定才会继续接下来的动作，点击取消则不做任何动作（即不会请求接口）。
如：
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>
两个按钮都请求，则：
//任务下线
offline(data){
this.$confirm('是否开启保存点？', {
distinguishCancelAndClose: true,
confirmButtonText: '是',
cancelButtonText: '否', //相当于 取消按钮
type: 'warning'
}).then(() => {
api.taskOffline({taskId: data.taskId, isSavepoint: '1'}).then(res => {
if (res.data.code === "100") {
this.$message({type: 'success', message: '下线成功!'})
this.getTableData()
} else {
this.$message({type: 'error', message: res.data.msg})
this.getTableData()
}
})
}).catch(action => {
//判断是 cancel (自定义的取消) 还是 close （关闭弹窗）
if (action === 'cancel'){
api.taskOffline({taskId: data.taskId, isSavepoint: '0'}).then(res => {
if (res.data.code === "100") {
this.$message({type: 'success', message: '下线成功!'})
this.getTableData()
} else {
this.$message({type: 'error', message: res.data.msg})
this.getTableData()
}
})
}
})
默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和callback回调的参数均为 ‘cancel’（普通弹出框中的点击取消时的回调参数）。
如果将distinguishCancelAndClose属性设置为 true，则上述两种行为的参数分别为 ‘cancel’ 和 ‘close’。（注意：如果没有设置distinguishCancelAndClose为true，则都默认为取消）
这样就可以在catch中拿到回调参数action进行判断做什么操作了
vue项目如何使用this.$confirm首先在element-ui中的el-table下的el-table-column中引入插槽（相当于占位符）
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button
>
</template>
handleDelete(index, item) {
this.$confirm("你确定要删除吗，请三思,后果自负", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
console.log("确定了，要删除");
})
.catch(() => {
console.log("放弃了");
});
},
此时，需要在main.js中注册组件
import {MessageBox} from 'element-ui';
// Vue.use(MessageBox);//与其他引用不同的是，这里“不能”加Vue.use(MessageBox),不然会出现问题，达不到想要的效果
Vue.prototype.$confirm = MessageBox.confirm;
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
