el-dialog 如何自定义关闭事件

### 创建自定义 Confirm 对话框 为了在 Vue 3 中使用 `el-dialog` 组件创建一个自定义的确认对话框，可以遵循以下模式。此方法不仅展示了如何构建对话框本身，还涵盖了处理用户输入的方式。 #### 定义父组件逻辑 通过按钮触发对话框显示，并利用响应式属性控制其可见性： ```vue <template> <div> <!-- 触发打开对话框 --> <el-button type="primary" @click="dialogVisible = true">Open Dialog</el-button> <!-- 自定义编辑对话框 --> <edit-dialog :visible.sync="dialogVisible"> <span slot="title">{{ title }}</span> <p>{{ message }}</p> <template #footer> <el-button @click="handleCancel()">取消</el-button> <el-button type="primary" @click="handleConfirm()">确定</el-button> </template> </edit-dialog> </div> </template> <script setup> import { ref } from 'vue'; const dialogVisible = ref(false); const title = "提示"; const message = "您确定要执行该操作吗？"; function handleConfirm() { console.log('Confirmed'); dialogVisible.value = false; } function handleCancel() { console.log('Canceled'); dialogVisible.value = false; } </script> ``` 上述代码片段中，当点击“Open Dialog”按钮时会设置 `dialogVisible` 的值为真，从而展示对话框[^1]。同时，在 `<edit-dialog>` 标签内定义了标题、消息体以及底部的操作按钮区域。 #### 实现 EditDialog 组件 接下来是具体的 `EditDialog.vue` 文件内容，它负责呈现实际弹窗界面并接收来自外部的状态变化通知： ```vue <template> <el-dialog :visible="props.visible" width="30%" @close="$emit('update:visible', false)"> <slot name="title"></slot> <slot></slot> <template v-if="$slots.footer" #footer> <slot name="footer"></slot> </template> </el-dialog> </template> <script setup> defineProps({ visible: Boolean, }); </script> ``` 这里的关键在于监听关闭事件并通过 `$emit()` 方法更新父级传递过来的数据绑定项 `visible` 属性，以此同步状态改变。 针对提到的服务端数据交互中的加载指示器问题，如果发现 `v-loading` 指令无法正常工作于 `el-dialog` 上，则建议尝试将其应用于更外层容器或直接作为样式类应用到目标元素上以确保兼容性和预期行为[^2]。

可以通过给 el-dialog 组件绑定一个 close 方法来实现关闭事件，代码示例如下： ``` <el-dialog title="提示" :visible.sync="dialogVisible" :close-on-click-modal="false" :show-close="true" @close="handleCloseDialog" > <p>确定要关闭对话框吗？</p> <div slot="footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="handleCloseDialog">确定</el-button> </div> </el-dialog> ``` 在上面的代码中，@close="handleCloseDialog" 表示当用户点击关闭按钮或者按下 ESC 键时，会调用 handleCloseDialog 方法来关闭对话框。在 handleCloseDialog 方法中，可以处理一些自定义逻辑，比如提交表单、清空表单数据等。