messageBox的.then改造为async/await写法

官网提供的写法:

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

但是不想在.then中写其他方法,改造为同步的async,await写法

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

<script>
  export default {
    methods: {
      async open() {
        const res = await this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })

        if(res == 'confirm'){
          console.log('执行成功回调')
        }else{
          console.log('执行失败回调')
        }
      },
    }
  }
</script>
posted @ 2021-05-15 10:30  yx1102  阅读(1220)  评论(0编辑  收藏  举报