网站空间域名购买,网站托管团队,二级域名做网站有哪些缺点,南沙开发区建设和交通局网站目录 前言1. 基本知识2. Demo 前言
原先对于该知识点写过一个Demo#xff0c;推荐阅读#xff1a;点击按钮框来选择相应信息#xff08;Vue Java#xff09;
1. 基本知识
el-dialog 是 Element UI 框架中的一个组件#xff0c;用于创建对话框
提供了丰富的功能和选项… 目录 前言1. 基本知识2. Demo 前言
原先对于该知识点写过一个Demo推荐阅读点击按钮框来选择相应信息Vue Java
1. 基本知识
el-dialog 是 Element UI 框架中的一个组件用于创建对话框
提供了丰富的功能和选项可以用来创建各种类型的对话框如信息确认框、表单填写框等
基本用法如下
templateel-dialog :visible.syncdialogVisible title对话框标题!-- 对话框内容 --/el-dialog
/templatescript
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%内容为 “这是一个简单的示例对话框”
对话框有两个按钮一个是 “取消”点击后对话框关闭另一个是 “确定”点击后同样关闭对话框
templatedivel-button typeprimary clickopenDialog打开对话框/el-buttonel-dialog :visible.syncdialogVisible title示例对话框 width30%span这是一个简单的示例对话框/spandiv slotfooter classdialog-footerel-button clickdialogVisible false取 消/el-buttonel-button typeprimary clickdialogVisible false确 定/el-button/div/el-dialog/div
/templatescript
export default {data() {return {dialogVisible: false};},methods: {openDialog() {this.dialogVisible true;}}
};
/script结合大部分属性的Demo
Demo特性主要围绕属性的作用
对话框标题为 “示例对话框”对话框宽度为页面宽度的 50%对话框距离顶部的距离为页面高度的 20%显示遮罩层遮罩层插入至 body 元素上点击遮罩层时关闭对话框按下 ESC 键时关闭对话框对话框可拖动对话框可调整大小
templatedivel-button typeprimary clickopenDialog打开对话框/el-buttonel-dialog:visible.syncdialogVisible:titledialogTitle:widthdialogWidth:topdialogTop:modalmodalVisible:modal-append-to-bodyappendToBody:close-on-click-modalcloseOnClickModal:close-on-press-escapecloseOnPressEscape:draggabledraggable:resizableresizableclosehandleClosespan这是一个演示对话框/spandiv slotfooter classdialog-footerel-button clickdialogVisible false取 消/el-buttonel-button typeprimary clickdialogVisible false确 定/el-button/div/el-dialog/div
/templatescript
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(对话框已关闭);}}
};
/scriptstyle scoped
.dialog-footer {text-align: right;
}
/style
