vue项目自定义弹窗组件请求接口,element弹窗关闭事件处理

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    @close="handleClose"
    title="自定义弹窗"
  >
    <!-- 弹窗内容 -->
    <span>这里是弹窗内容</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      // 其他需要的数据
    };
  },
  methods: {
    // 显示弹窗
    showDialog() {
      this.dialogVisible = true;
    },
    // 处理弹窗关闭事件
    handleClose() {
      // 在这里执行需要的操作，例如清理数据
    },
    // 提交表单
    submitForm() {
      // 调用接口的方法
      this.requestApi().then(() => {
        this.$message.success('操作成功');
        this.dialogVisible = false;
      }).catch(() => {
        this.$message.error('操作失败');
      });
    },
    // 请求接口的方法
    requestApi() {
      // 这里使用axios或者其他的HTTP客户端发送请求
      // 返回Promise对象
    }
  }
};
</script>

这个代码示例展示了如何在Vue项目中使用Element UI的el-dialog组件来创建一个自定义的弹窗。弹窗内容可以是表单或其他内容，并且展示了如何在关闭弹窗时进行一些清理工作。同时，也展示了如何在用户提交表单后请求一个API接口，并处理可能出现的成功或失败的情况。