【Element-UI】vue使用 this.$confirm区分取消与关闭，vue给this.$confirm设置多个按钮

在使用this.$confirm过程中经常会遇到将取消按钮修改成其他的按钮去执行，如果直接使用catch会出现右上角以及遮罩层关闭也会执行，所以需要做个区分
如遇到两个按钮可以用取消按钮作为第二个按钮如果是出现多个按钮就不支持了

vue使用 this.$confirm时区分取消与右上角关闭和弹窗关闭

html代码

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

js代码

<script>
  export default {
    methods: {
      open() {
        this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '保存',
          cancelButtonText: '放弃修改'
        })
          .then(() => {
            this.$message({
              type: 'info',
              message: '保存修改'
            });
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '放弃保存并离开页面'
                : '停留在当前页面'
            })
          });
      }
    }
  }
</script>

全部代码

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '保存',
          cancelButtonText: '放弃修改'
        })
          .then(() => {
            this.$message({
              type: 'info',
              message: '保存修改'
            });
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '放弃保存并离开页面'
                : '停留在当前页面'
            })
          });
      }
    }
  }
</script>

vue给this.$confirm设置多个按钮

Vue中使用this.confirm时，虽然默认只提供了确认和取消两个按钮，但您可以通过自定义Vue.prototype上的confirm方法或者直接使用第三方UI库（如Element UI、Vuetify等）提供的API来自定义对话框，以包含更多的操作按钮。以下是一个基于Element UI的示例，展示如何在this.$confirm中设置多个操作按钮：

使用Element UI自定义确认对话框
Element UI并没有直接提供在this.$confirm中设置多个按钮的选项，但您可以使用el-dialog组件来自定义一个具有多个操作按钮的对话框。下面是一个基本示例：

HTML代码

<template>
  <el-dialog
    :title="'系统提示'"
    :visible.sync="dialogVisible"
    width="30%"
    @close="handleClose"
  >
    <p>页面内已存在正在编辑的模型</p>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleEdit">继续编辑</el-button>
      <el-button @click="handleCreateNew">创建新模型</el-button>
      <el-button @click="handleClose">关闭</el-button>
    </span>
  </el-dialog>
</template>

js代码

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    // 显示自定义对话框
    showDialog() {
      this.dialogVisible = true;
    },
    // 继续编辑操作
    handleEdit() {
      this.$emit('update', { page_id: this.page_id });
      this.dialogVisible = false;
    },
    // 创建新模型操作
    handleCreateNew() {
      this.add_page();
      this.dialogVisible = false;
    },
    // 关闭对话框
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

全部代码

<template>
  <el-dialog
    :title="'系统提示'"
    :visible.sync="dialogVisible"
    width="30%"
    @close="handleClose"
  >
    <p>页面内已存在正在编辑的模型</p>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleEdit">继续编辑</el-button>
      <el-button @click="handleCreateNew">创建新模型</el-button>
      <el-button @click="handleClose">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    // 显示自定义对话框
    showDialog() {
      this.dialogVisible = true;
    },
    // 继续编辑操作
    handleEdit() {
      this.$emit('update', { page_id: this.page_id });
      this.dialogVisible = false;
    },
    // 创建新模型操作
    handleCreateNew() {
      this.add_page();
      this.dialogVisible = false;
    },
    // 关闭对话框
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>