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

原创已于 2023-12-19 10:01:49 修改 · 414 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

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

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

在这里插入图片描述

 /*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;
        }
    }