【区分vue2和vue3下的element UI Dialog 对话框组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 和 Vue 3 中，Element UI（针对 Vue 2）和 Element Plus（针对 Vue 3）提供了 Dialog 对话框组件，用于在页面中显示模态对话框。这两个库中的 Dialog 组件在属性、事件和方法的使用上有所相似，但也存在一些差异。下面我将分别介绍 Vue 2 下的 Element UI Dialog 组件和 Vue 3 下的 Element Plus Dialog 组件的使用方式。

Vue 2 + Element UI Dialog 组件

属性（Props）

• visible.sync 或 v-model：控制对话框是否显示，使用 .sync 修饰符或 v-model 双向绑定。
• title：对话框标题。
• width：对话框的宽度。
• fullscreen：是否为全屏对话框。
• top：对话框距离顶部的距离。
• modal：是否需要遮罩层。
• modal-append-to-body：遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上。
• lock-scroll：是否在 Dialog 出现时将 body 滚动锁定。
• custom-class：Dialog 的自定义类名。
• close-on-click-modal：是否可以通过点击遮罩层关闭 Dialog。
• close-on-press-escape：是否可以通过按下 ESC 关闭 Dialog。<