dialog设置transform 剧中的话会出现页面上的边框会出现虚化影响

new Object ~

已于 2023-12-19 10:01:49 修改

阅读量396

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

于 2022-09-30 10:58:12 首次发布

本文链接：https://blog.youkuaiyun.com/github_39088222/article/details/127119975

这篇博客介绍了如何对element组件库的对话框（dialog）样式进行调整，使其以绝对定位显示在屏幕中央，实现垂直和水平居中，并通过calc()函数动态计算最大高度和宽度以适应不同屏幕尺寸。此外，还设置了对话框内容区域（.el-dialog__body）的flex布局和滚动条处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

 /*element组件库样式修改*/
    /deep/ .el-dialog {
        display: flex;
        flex-direction: column;
        margin:0 !important;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        max-height:calc(100% - 30px);
        max-width:calc(100% - 30px);
        .el-dialog__body{
            flex:1;
            overflow: auto;
        }
    }