效果展示

先给大家展示一下大致的样式 

 代码
<el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加用户"
width="35%" center> <el-form :inline="true" :model="addFormInfo" status-icon
label-width="120px"> <el-form-item label="用户名"> <el-input
v-model="addFormInfo.username" placeholder="请输入用户名"></el-input> </el-form-item>
<el-form-item label="密码"> <el-input v-model="addFormInfo.password"
placeholder="请输入密码"></el-input> </el-form-item> <el-form-item label="邮箱">
<el-input v-model="addFormInfo.email" placeholder="请输入邮箱"></el-input>
</el-form-item> <el-form-item label="电话号码"> <el-input
v-model="addFormInfo.phoneNum" placeholder="请输入电话号码"></el-input>
</el-form-item> </el-form> <template #footer> <span class="dialog-footer">
<el-button @click="dialogAddVisible = false">取消</el-button> <el-button
type="primary" @click="sureHandler">确定</el-button> </span> </template>
</el-dialog> //添加添加对话框控制器 const dialogAddVisible = ref(false)
对话框详解

我用到的

draggable:为 Dialog 启用可拖拽功能

destroy-on-close:当关闭 Dialog 时,销毁其中的元素

v-model="dialogAddVisible":绑定对话框的状态

title="添加用户":对话框的标题

width="35%":对话框宽度

center:是否让 Dialog 的 header 和 footer 部分居中排列

全部参数

属性名说明类型可选值默认值
model-value / v-model是否显示 Dialogboolean——
titleDialog 对话框 Dialog 的标题, 也可通过具名 slot (见下表)传入string——
widthDialog 的宽度string / number—50%
fullscreen是否为全屏 Dialogboolean—false
topDialog CSS 中的 margin-top 值string—15vh
modal是否需要遮罩层boolean—true
append-to-bodyDialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 trueboolean—false
lock-scroll是否在 Dialog 出现时将 body 滚动锁定boolean—true
custom-class deprecatedDialog 的自定义类名string——
open-delayDialog 打开的延时时间,单位毫秒number—0
close-delayDialog 关闭的延时时间,单位毫秒number—0
close-on-click-modal是否可以通过点击 modal 关闭 Dialogboolean—true
close-on-press-escape是否可以通过按下 ESC 关闭 Dialogboolean—true
show-close是否显示关闭按钮boolean—true
before-close关闭前的回调,会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候.
Function(done) (done 用来关闭 Dialog)——
draggable为 Dialog 启用可拖拽功能boolean—false
center是否让 Dialog 的 header 和 footer 部分居中排列boolean—false
align-center是否水平垂直对齐对话框boolean—false
destroy-on-close当关闭 Dialog 时,销毁其中的元素boolean—false
Slots

插槽名
说明
—Dialog 的内容
header对话框标题的内容;会替换标题部分,但不会移除关闭按钮。
title deprecated与 header 作用相同 请使用 header
footerDialog 按钮操作区的内容
Events

事件名说明参数
openDialog 打开的回调—
openedDialog 打开动画结束时的回调—
closeDialog 关闭的回调—
closedDialog 关闭动画结束时的回调—
open-auto-focus输入焦点聚焦在 Dialog 内容时的回调—
close-auto-focus输入焦点从 Dialog 内容失焦时的回调—
 设置对话框的样式

打开开发者工具

这里我们可以看到对话框的头部样式class是 .el-dialog__header

这里我们可以看到对话框的body样式的class为.el-dialog__body

 这里我们可以看到对话框的底部样式的class为  .el-dialog__footer

 我们需要在App.vue修改一下全局样式
/**修改dialog的样式*/ .el-dialog__header{ background-image: linear-gradient(120deg,
#00e4d0, #5983e8) !important; margin-right: 0 !important; padding-bottom: 15px
!important; } .el-dialog__body{ background-image: linear-gradient(135deg,
#EE9AE5 10%, #5961F9 100%) !important; } .el-dialog__footer{ background-image:
linear-gradient(135deg, #EE9AE5 10%, #5961F9 100%) !important; }
.el-dialog__header span{ color: #fff; }

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信