©2020-2024 ioDraw All rights reserved
效果展示
先给大家展示一下大致的样式
代码
<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; }