el-dialog使用、样式自定义
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;
}
更多推荐
所有评论(0)