面试题：如何使用 Element UI 的 el-dialog 组件创建模态对话框？并在关闭对话框时进行一些清理操作？

使用 Element UI 的 el-dialog 组件创建模态对话框非常简单。以下是一个完整的示例，展示如何创建对话框，并在关闭对话框时执行清理操作。

1. 安装 Element UI

如果尚未安装 Element UI，可以通过以下命令安装：

npm install element-ui

然后在项目中引入 Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 使用 `el-dialog` 创建模态对话框

以下是一个使用 el-dialog 创建模态对话框的示例：

<template>
  <div>
    <!-- 触发对话框的按钮 -->
    <el-button type="primary" @click="openDialog">打开对话框</el-button>

    <!-- 对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一个对话框</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false, // 控制对话框显示/隐藏
    };
  },
  methods: {
    // 打开对话框
    openDialog() {
      this.dialogVisible = true;
    },
    // 关闭对话框前的回调
    handleClose(done) {
      this.$confirm('确定关闭对话框吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.cleanup(); // 执行清理操作
          done(); // 关闭对话框
        })
        .catch(() => {
          // 取消关闭
        });
    },
    // 清理操作
    cleanup() {
      console.log('执行清理操作');
      // 例如：重置表单、清除数据等
    },
  },
};
</script>

3. 关键点说明

visible.sync：
- 用于控制对话框的显示和隐藏。
- 通过 dialogVisible 变量绑定。
before-close：
- 对话框关闭前的回调函数。
- 可以在这里执行清理操作，并调用 done() 关闭对话框。
this.$confirm：
- Element UI 提供的确认框，用于在关闭对话框前提示用户。
清理操作：
- 在 cleanup 方法中执行清理逻辑，例如重置表单、清除数据等。

4. 其他常用属性

width：设置对话框的宽度。
title：设置对话框的标题。
close-on-click-modal：是否可以通过点击模态框关闭对话框。
close-on-press-escape：是否可以通过按下 ESC 关闭对话框。

示例

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="50%"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
>
  <span>这是一个对话框</span>
</el-dialog>

5. 完整代码

以下是完整的代码示例：

<template>
  <div>
    <el-button type="primary" @click="openDialog">打开对话框</el-button>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一个对话框</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm('确定关闭对话框吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.cleanup();
          done();
        })
        .catch(() => {});
    },
    cleanup() {
      console.log('执行清理操作');
    },
  },
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>