el-dialog 二次确认

`el-dialog` 是 Element UI 中的一个内置组件，它是一个轻量级的对话框，常用于弹出模态窗口，展示信息、让用户输入数据或者做决策等场景。在某些需要用户进一步确认的操作时，你可以利用 `el-dialog` 的特性添加二次确认。

例如，当用户想要删除某个重要数据时，你可以首先打开一个弹窗提示用户确认是否真的要删除，并提供 "确定" 和 "取消" 两个按钮。如果点击 "确定"，再打开一个新的弹窗询问最后的确认，这可以使用 `v-model` 双向绑定和条件渲染来实现：

<template>
  <el-dialog title="确认操作">
    <p>你确定要删除这个记录吗?</p>
    <span slot="footer">
      <el-button @click="deleteConfirm">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </span>
  </el-dialog>
  
  <!-- 如果第一次确认，则显示第二次确认 -->
  <el-dialog v-if="showSecondaryConfirm" :title="secondaryConfirmTitle">
    <!-- 这里可以放置第二个确认的内容和按钮 -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      showSecondaryConfirm: false,
      secondaryConfirmTitle: '再次确认删除',
      // 其他数据...
    };
  },
  methods: {
    deleteConfirm() {
      this.showSecondaryConfirm = true; // 显示二次确认
      // 删除操作逻辑...
    },
    cancel() {
      this.showSecondaryConfirm = false; // 取消二次确认并关闭对话框
    },
  }
};
</script>

在这个例子中，`deleteConfirm` 方法触发了第一次确认，然后通过控制 `showSecondaryConfirm` 属性来决定是否显示二次确认。用户完成第二次确认后，可以根据实际情况继续执行删除操作或关闭对话框。