element plus Dialog点击确定后 加载一下成功后 自动关闭弹窗 并且显示message

Element Plus中的Dialog组件通常用于异步操作，比如数据加载或确认操作。当你点击确定后，可以配合v-model绑定的状态管理和生命周期钩子来实现这个功能。以下是一个基本的例子：

<template>
  <el-dialog :visible.sync="dialogVisible" title="提示信息">
    <div v-if="isLoading">正在加载...</div>
    <p v-else>{{ message }}</p>
    <el-button @click="handleClose">确定</el-button>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      isLoading: true,
      message: '',
    };
  },
  methods: {
    handleClose() {
      this.$http.get('your-api-url') // 假设这是一个异步请求
        .then(response => {
          this.message = response.data.message;
          this.isLoading = false; // 加载完成，设置为false
          this.dialogVisible = false; // 关闭弹窗
        })
        .catch(() => {
          this.message = '加载失败';
          this.isLoading = false;
        });
    },
  },
};
</script>

在这个例子中，`handleClose`方法会在用户点击确定后发起HTTP请求。如果请求成功，它会更新`message`并关闭对话框；如果请求失败，则显示错误消息。