el-dialog弹窗改变默认样式，改变弹窗高度位置

最新推荐文章于 2024-06-17 15:58:57 发布

不想上班只想要钱

最新推荐文章于 2024-06-17 15:58:57 发布

阅读量4.5k

点赞数 2

分类专栏： css 前端 html 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/Aa12364567/article/details/127964550

版权

前端同时被 3 个专栏收录

150 篇文章 3 订阅

订阅专栏

html

89 篇文章 1 订阅

订阅专栏

css

84 篇文章 1 订阅

订阅专栏

el-dialog弹窗改变默认样式，改变弹窗高度位置
在el-dialog上添加class=“view-dialog”

<el-dialog :title="dialogData.title" :visible.sync="dialogData.dialog" ref="drawer" :size="620"
            class="view-dialog">
            <div class="demo-drawer__content">
                <el-form :model="dialogData.dataForm" :label-position="dialogData.right" label-width="150px"
                    class="form" :inline="true"
                    <el-form-item :show-overflow-tooltip="true" label="采样时间：">
                        <el-tooltip :disabled="disabledTooltip" effect="dark" :content="dialogData.dataForm.recordTime"
                            placement="top">
                            <span v-text="dialogData.dataForm.recordTime"></span>
                        </el-tooltip>
                    </el-form-item>
                    
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button size="small" @click="cancelGeologyForm">取 消</el-button>
                    <el-button size="small" type="primary" @click="cancelGeologyForm">确 定</el-button>
                </div>
            </div>
        </el-dialog>

/* 弹窗 */
/* 改变高度弹窗位置*/
.dialog-content /deep/ .el-dialog__body {
    height: 40vh;
    overflow: auto;
}
*/deep/.view-dialog>.el-dialog {
    margin-top: 20vh !important;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 2px 2px 5px #d0d0d0;
}

*/deep/.view-dialog>.el-dialog>.el-dialog__header {
    width: 100%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    background: #F4F5F7;
    border-radius: 12px 12px 0px 0px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #252B3A;
    padding: 0 0 0 40px;
    padding-left: 0;
}

*/deep/.view-dialog>.el-dialog>.el-dialog__footer {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

*/deep/.dialog-form>.el-form-item {
    margin-bottom: 30px;
}

*/deep/.dialog-form>.el-form-item>.el-form-item__content>.el-input>.el-input__inner {
    width: 220px;
    height: 34px;
    background: #FFFFFF;
    border: 1px solid #DCDEE2;
    border-radius: 3px;
}

*/deep/.dialog-form>.el-form-item>.el-form-item__content>.el-select>.el-input>.el-input__inner {
    width: 220px;
    height: 34px;
    background: #FFFFFF;
    border: 1px solid #DCDEE2;
    border-radius: 3px;
}

*/deep/.view-dialog>.el-dialog>.el-dialog__header>.el-dialog__headerbtn {
    top: 0;
}

.view-dialog /deep/ .el-form-item__content {
    width: 250PX;
}