vue element插件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;

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于vue element插件this.$confirm用法及说明(取消也可以发请求)的详细内容...