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;
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
