element-ui对话框dialog详解

效果展示

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

 代码

  "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>
    

//添加添加对话框控制器
const dialogAddVisible = ref(false)

对话框详解

我用到的

draggable：为 Dialog 启用可拖拽功能

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

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

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

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

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

全部参数

属性名	说明	类型	可选值	默认值
model-value / v-model	是否显示 Dialog	boolean	—	—
title	Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入	string	—	—
width	Dialog 的宽度	string / number	—	50%
fullscreen	是否为全屏 Dialog	boolean	—	false
top	Dialog CSS 中的 margin-top 值	string	—	15vh
modal	是否需要遮罩层	boolean	—	true
append-to-body	Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true	boolean	—	false
lock-scroll	是否在 Dialog 出现时将 body 滚动锁定	boolean	—	true
custom-class deprecated	Dialog 的自定义类名	string	—	—
open-delay	Dialog 打开的延时时间，单位毫秒	number	—	0
close-delay	Dialog 关闭的延时时间，单位毫秒	number	—	0
close-on-click-modal	是否可以通过点击 modal 关闭 Dialog	boolean	—	true
close-on-press-escape	是否可以通过按下 ESC 关闭 Dialog	boolean	—	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
footer	Dialog 按钮操作区的内容

Events

事件名	说明	参数
open	Dialog 打开的回调	—
opened	Dialog 打开动画结束时的回调	—
close	Dialog 关闭的回调	—
closed	Dialog 关闭动画结束时的回调	—
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;
  }