一文读懂Vue中的el-dialog（附Demo）

前言

原先对于该知识点写过一个Demo，推荐阅读：点击按钮框来选择相应信息（Vue + Java）

1. 基本知识

el-dialog 是 Element UI 框架中的一个组件，用于创建对话框

提供了丰富的功能和选项，可以用来创建各种类型的对话框，如信息确认框、表单填写框等

基本用法如下：

<template><el-dialog :visible.sync="dialogVisible" title="对话框标题"><!-- 对话框内容 --></el-dialog>
</template><script>
export default {data() {return {dialogVisible: false // 控制对话框的显示与隐藏}}
}
</script>

常用的属性如下：

visible：控制对话框的显示与隐藏，可以使用.sync修饰符实现双向绑定。
title：对话框标题。
width：对话框宽度。
top：对话框距离顶部的距离。
modal：是否显示遮罩层。
modal-append-to-body：遮罩层是否插入至 body 元素上。
close-on-click-modal：是否点击遮罩层关闭对话框。
close-on-press-escape：是否按下 ESC 键关闭对话框
draggable：是否可拖动
resizable：是否可调整大小

事件：

open: 对话框打开时触发的事件
close: 对话框关闭时触发的事件

2. Demo

点击按钮可以打开对话框，对话框标题为 “示例对话框”，宽度为页面宽度的 30%，内容为 “这是一个简单的示例对话框”

对话框有两个按钮，一个是 “取消”，点击后对话框关闭，另一个是 “确定”，点击后同样关闭对话框

<template><div><el-button type="primary" @click="openDialog">打开对话框</el-button><el-dialog :visible.sync="dialogVisible" title="示例对话框" width="30%"><span>这是一个简单的示例对话框</span><div slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></div></el-dialog></div>
</template><script>
export default {data() {return {dialogVisible: false};},methods: {openDialog() {this.dialogVisible = true;}}
};
</script>

结合大部分属性的Demo：

Demo特性主要围绕属性的作用

对话框标题为 “示例对话框”
对话框宽度为页面宽度的 50%
对话框距离顶部的距离为页面高度的 20%
显示遮罩层
遮罩层插入至 body 元素上
点击遮罩层时关闭对话框
按下 ESC 键时关闭对话框
对话框可拖动
对话框可调整大小

<template><div><el-button type="primary" @click="openDialog">打开对话框</el-button><el-dialog:visible.sync="dialogVisible":title="dialogTitle":width="dialogWidth":top="dialogTop":modal="modalVisible":modal-append-to-body="appendToBody":close-on-click-modal="closeOnClickModal":close-on-press-escape="closeOnPressEscape":draggable="draggable":resizable="resizable"@close="handleClose"><span>这是一个演示对话框</span><div slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></div></el-dialog></div>
</template><script>
export default {data() {return {dialogVisible: false,dialogTitle: "示例对话框",dialogWidth: "50%",dialogTop: "20vh",modalVisible: true,appendToBody: true,closeOnClickModal: true,closeOnPressEscape: true,draggable: true,resizable: true};},methods: {openDialog() {this.dialogVisible = true;},handleClose() {console.log("对话框已关闭");}}
};
</script><style scoped>
.dialog-footer {text-align: right;
}
</style>