Vue ElementUI this.$confirm async await封装

最新推荐文章于 2024-08-09 16:52:18 发布

疆~

最新推荐文章于 2024-08-09 16:52:18 发布

阅读量1.7k

点赞数 2

分类专栏： ElementUI 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_40323256/article/details/126604300

版权

ElementUI 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

this.$confirm官网：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/message-box

改造前：

    async test() {
      console.log("111111");
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("点击确定");

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          console.log("点击取消");

          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      console.log("2222222");
    },

async await改造后：

async test() {
      console.log("111111");
      let confirmRes = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});

      if (confirmRes !== "confirm") {
        console.log("点击取消");
        return;
      }
      console.log("点击确定");
      console.log("2222222");
    }

一定要加上.catch(() => {});否则报错