在 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。show-close：是否显示关闭按钮。before-close：关闭前的回调，会暂停 Dialog 的关闭。
事件（Events）
open：Dialog 打开的回调。opened：Dialog 打开动画结束时的回调。close：Dialog 关闭的回调。closed：Dialog 关闭动画结束时的回调。
方法（Methods）
Element UI 的 Dialog 组件通常不直接暴露方法供外部调用。你主要通过修改绑定的 visible 属性或监听事件来控制对话框的显示和隐藏。
示例
<template><el-button type="primary" @click="dialogVisible = true">点击打开对话框</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog>
</template><script>
export default {data() {return {dialogVisible: false,};},methods: {handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},},
};
</script>
Vue 3 + Element Plus Dialog 组件
属性（Props）
modelValue或v-model：控制对话框是否显示，使用v-model双向绑定。title：对话框标题。width：对话框的宽度。fullscreen：是否为全屏对话框。top：对话框距离顶部的距离。modal：是否需要遮罩层。modal-class：遮罩层的自定义类名。append-to-body：遮罩层是否插入至 body 元素上。lock-scroll：是否在 Dialog 出现时将 body 滚动锁定。custom-class：Dialog 的自定义类名。show-close：是否显示关闭按钮。close-on-click-modal：是否可以通过点击遮罩层关闭 Dialog。close-on-press-escape：是否可以通过按下 ESC 关闭 Dialog。before-close：关闭前的回调，会暂停 Dialog 的关闭。
事件（Events）
open：Dialog 打开的回调。opened：Dialog 打开动画结束时的回调。close：Dialog 关闭的回调。closed：Dialog 关闭动画结束时的回调。
方法（Methods）
与 Element UI 类似，Element Plus 的 Dialog 组件通常也不直接暴露方法供外部调用。你主要通过修改绑定的 modelValue 属性或监听事件来控制对话框的
