在 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 的自定义类名。 <