在 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
属性或监听事件来控制对话框的显示和隐藏。
示例
vue
<template>
<el-button type="primary" @click="dialogVisible = true">点击打开对话框</el-button>
<el-dialog
title="提示"
: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
属性或监听事件来控制对话框的