vue 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()
                 }
             })
         }
     })

 <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("放弃了");
        });
    },

import {MessageBox} from 'element-ui';

// Vue.use(MessageBox);//与其他引用不同的是，这里“不能”加Vue.use(MessageBox),不然会出现问题，达不到想要的效果
Vue.prototype.$confirm = MessageBox.confirm;