element - 如何通过js调用el-confirm组件？

最新推荐文章于 2024-08-22 11:52:08 发布

原创最新推荐文章于 2024-08-22 11:52:08 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

elementUI 专栏收录该内容

19 篇文章

订阅专栏

本文探讨如何在Vue应用中利用element-ui的$confirm组件，为遍历接口返回数组中的特定按钮添加确认弹窗功能。通过示例代码btnsCallback()展示了如何在点击删除按钮时弹出警告对话框，确保用户确认操作。点击确定和取消按钮分别触发不同的回调处理。

1. 场景描述

关于el-confirm，意在防止误点击的操作。

官方用法如下：
在这里插入图片描述

这种用法肯定不能满足所有的需求，如下需求即不能满足。

按钮是遍历接口返回的数组，在点击特定按钮时需要弹出确认弹窗

那么该如何实现这个需求呢？

2.实现方案：

btnsCallback(){
  this.$confirm("是否确认要删除该数据吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(res => {
      // 点击了确定按钮
    })
    .catch(err => {
      //点击了取消按钮
    });
}