Element-UI 优化

Posted 2022-03-11 ---空白---

1.对话框

当打开的对话框页面元素众多，俨然一个子页面是，可以做2个优化：

• 优化项1：对话框去滚动，当对话框内容过多时，把滚动条控制在对话框内部，避免出现页面级的滚动条
• 优化项2：优化对话框标题样式，为其添加一个背景色，使之看上去更像一个iframe页面

实现思路：

• 把滚动条控制在对话框内部，要点在于给内容区域设定一个合适的高度，经测试，这个高度为：
  页面高度(100vh) - marign-top(15vh) - marign-bottom(50px) - 对话框标题高度(54px)
• 去除内容区默认的默认的padding
• 重置对话框标题背景色
• 如果页面元素不足以撑起整个容器，可以把提交按钮固定的底部，防止页面过于空旷

/* 重置对话框标题背景色 */
.el-dialog__header 
    background-color: #2c3e50 !important;

/* 重置对话框标题字体颜色 */
.el-dialog__header .el-dialog__title 
    color: #fff !important;

/* 去除内容区默认padding */
.el-dialog__body
    padding:0 !important;

<!-- 弹框区域 开始 -->
<el-dialog title="对话框标题" :visible.sync="dialogVisible"  :close-on-click-modal="false">
    <!-- calc(85vh - 104px) -->
    <div >
        <vue-scroll>
            <div >
                
            </div>
        </vue-scroll>
    </div>
</el-dialog>
<!-- 弹框区域 结束 -->