element中的$confirm的使用

当在Vue项目中使用Element UI组件库时，我们可以利用Element中提供的许多组件和方法，如对话框、表格、表单等。其中，$confirm方法是Element UI提供的一个强大的提示框组件，可以方便地实现弹出二次确认框，并在点击确认/取消按钮后返回用户选择的结果。下面是关于如何使用Element中的$confirm方法的详细攻略：

1. 引入Element UI库

在Vue项目的入口文件中（如main.js或app.js）引入Element UI库，可以通过npm安装或直接在HTML中引入Element UI的CDN。

npm安装：

npm install element-ui -S

在main.js中引入Element UI，以便在项目的各个部分使用它的组件：

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

2. 使用$confirm方法

在Vue组件中使用$confirm方法，需要先通过Vue的$confirm方法引入它，然后再在Vue实例中使用，如下所示：

this.$confirm('是否继续操作？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  // 点击确定按钮后要执行的操作
}).catch(() => {
  // 点击取消按钮后要执行的操作
});

以上代码演示了如何使用$confirm方法，该方法会弹出一个二次确认框，分别显示提示信息、确定按钮、取消按钮和图标，等待用户点击。点击确定或取消按钮后，$confirm方法会根据用户的选择结果来执行相应的操作。

2.1 例子一

下面是一个更具体的例子，展示了如何使用$confirm方法来删除某项记录，代码如下：

deleteItem(index) {
  this.$confirm('确定要删除该记录吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    this.tableData.splice(index, 1);
    this.$message({
      type: 'success',
      message: '删除成功!'
    });
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '已取消删除'
    });          
  });
}

在上述代码中，deleteItem方法被绑定到一个按钮上，当用户点击该按钮时，会先弹出一个二次确认框，询问用户是否要删除记录。如果用户点击了确定按钮，则会删除该记录并提示“删除成功”，如果用户点击了取消按钮，则会提示“已取消删除”。

2.2 例子二

下面是另一个更具体的例子，展示了如何使用$confirm方法来显示一个自定义的确认框，代码如下：

showCustomConfirm() {
  this.$confirm({
    title: '自定义确认框', 
    message: '是否继续操作？',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    showCancelButton: true,
    closeOnClickModal: false,
    distinguishCancelAndClose: true,
    cancelButtonClass: 'my-btn',
    confirmButtonClass: 'my-btn',
    closeOnPressEscape: false,
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        this.$message({
          type: 'success',
          message: '你点击了确定按钮'
        });
      } else if (action === 'cancel') {
        this.$message({
          type: 'info',
          message: '你点击了取消按钮'
        });
      } 
      done();
    }       
  });
}

在上述代码中，showCustomConfirm方法被绑定到一个按钮上，当用户点击该按钮时，会弹出一个自定义的确认框。在这个自定义的确认框中，我们可以设置标题、提示信息、确认和取消按钮的文本、图标、样式等。同时，我们还可以查看用户点击了哪个按钮，并在用户点击确定或取消按钮后执行相应的操作。

3. 结论

$confirm方法是Element UI提供的一个非常实用的提示框组件，可以帮助我们在Vue项目中方便地实现弹出二次确认框。我们可以根据自己的需求定制确认框的标题、提示信息、按钮文本、图标、样式等信息，并监听用户的操作结果，根据结果来执行相应的操作。