el-dialog的close触发时机

在 Vue 3 使用 Element Plus 的 el-dialog 组件时，@close 和 @closed 是两个常见的事件，它们的主要区别在于触发的时机。

---

1. @close 事件

• 触发时机：当用户触发关闭对话框的动作时立即触发。

• 特点：

  • 关闭动作被触发时（如点击关闭按钮、点击遮罩层、按下 ESC 键等），立即触发。
  • 即使设置了 before-close 并未允许关闭，@close 仍然会被触发。
  • 用于监听用户尝试关闭对话框的行为。

• 适用场景：

  • 执行在关闭动作发生时的逻辑，例如记录日志或提示用户。
  • 不依赖于对话框是否最终被关闭。

---

2. @closed 事件

• 触发时机：当对话框完成关闭动画并从 DOM 中移除时触发。

• 特点：

  • 对话框的关闭已经完全生效且从页面中移除时触发。
  • 如果 before-close 阻止了关闭动作，则不会触发该事件。

• 适用场景：

  • 执行关闭后清理或后续逻辑，例如重置对话框内容、销毁绑定数据等。
  • 用于确认关闭动作确实完成。

区别对比

特性	@close	@closed
触发时机	用户触发关闭动作时	对话框完全关闭并从 DOM 移除后
与 before-close 的关系	无论 before-close 是否阻止关闭都会触发	如果 before-close 阻止关闭则不会触发
作用场景	捕捉关闭行为	确认关闭完成后执行清理逻辑

扩展

在 Vue 3 中使用 Element Plus 的 el-dialog 组件时，涉及关闭操作的事件和方法执行顺序如下：

主要方法和事件

1. before-close 方法

   • 当用户尝试关闭对话框时（点击关闭按钮或遮罩层、按下 ESC 键），before-close 会首先触发。
   • 特点：
     • 它是一个拦截方法，你可以通过回调函数决定是否允许关闭。
     • 如果 before-close 的回调中没有执行 done 方法，则对话框不会关闭。

2. 关闭对话框的逻辑

   • 如果 before-close 执行并调用 done，或者没有设置 before-close，组件内部会处理关闭逻辑。

3. update:modelValue 事件

   • 关闭逻辑执行后，modelValue 绑定值会被更新为 false。

4. closed 事件

   • 对话框完全关闭并从 DOM 中移除后，触发 closed 事件。