Element 弹出框确认信息

在我们平时工作中经常会碰到增删改查的需求，删除功能通常都被要求添加一个确认弹框，防止点错或者是想反悔的情况，那么我们该如何来写这个提示消息呢

首先来看官方文档MessageBox弹框

 

 

<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>

实际应用也很简单下面来举个例子，其中delData()是自定义的删除方法，delPersonInfo是接口

 //删除数据
    delData(id) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delPersonInfo(id).then(res => {
            if (res.data.code === 0) {
              this.getCompanyPersonList();
              // this.$message.success
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            }
          });
        })
        .catch(() => {
          // this.$message.error
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },