el-dialog使用、样式自定义

el-dialog参数

title：对话框标题 对话框可见性：

:visible.sync="dialogVisible"

避免遮罩层在弹出框之上：

:append-to-body="true"
:modal-append-to-body="false"

点击遮罩层不关闭弹窗：

:close-on-click-modal ="false"

对于弹出窗内有弹出窗的情况，需要联用以上属性：

:append-to-body="true"
:modal-append-to-body="false"
:close-on-click-modal ="false"

关闭窗口前执行的方法

:before-close="closeDialog"

el-dialog提供的样式

template代码：

<el-dialog
           width="100%"
           :title="title"
           :visible.sync="dialogVisible"
           :before-close="closeDialog"
        >
        </el-dialog>

弹窗全屏

添加fullscreen属性即可。

<el-dialog
           width="100%"
           :title="title"
           :visible.sync="dialogVisible"
           :modal-append-to-body=false
           :modal="false"
           :before-close="closeDialog"
            fullscreen>
</el-dialog>

遮罩层样式

.dialog /deep/ .el-dialog__wrapper {
          
   
        background-color:rgba(0,0,0,0.3);
    }

修改弹窗距离顶部高度

top属性。

<el-dialog :close-on-click-modal="false"
                   width="70%"
                   title="查看"
                   :visible.sync="departViewDialog"
                   :modal-append-to-body="false"
                   :before-close="closeDepartViewDialog"
                   top="1vh"
>

修改dialog头部

/deep/ .el-dialog__header{
          
   
        padding: 1vh 1vw 0 1vw;
    }

修改头部标题

/deep/ .el-dialog__title {
          
   
        line-height: 24px;
        font-size: 12px;
        color: #303133;
    }

修改右上角关闭按钮

/*修改右上角按钮*/
    /deep/ .el-dialog__headerbtn {
          
   
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 0;
        background: 0 0;
        border: none;
        outline: 0;
        cursor: pointer;
        font-size: 30px;
    }

修改dialog主体

/deep/.el-dialog__body{
          
   
        padding: 0 1vw;
    }