Element UI Dialog 对话框改成固定高度，超出部分滚动条滚动

• 前端

问题描述

elememt ui 中的el-dialog对话框如果内容过多高度会被无限拉长。要将其设置成固定高度，此处我设置的是页面总高度的70%，内容过多时在对话框内出现滚动条。但是这样设置会造成高度不能根据内容自适应，始终是70%。可以有两种方法实现：

一具体代码如下：

    
        
            
                
                
                    
                        
                            {{ $t("NeoLight.empty") }}

样式修改

// 修改对话框高度
.showAll_dialog {
    overflow: hidden;

    ::v-deep .el-dialog {
        margin: 0 auto !important;
        height: 70%;
        overflow: hidden;
        background-color: black;

        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
            // 下边设置字体，我的需求是黑底白字
            color: #ffffff;
            line-height: 30px;
            padding: 0 15px;
        }
    }

具体效果：

在这里插入图片描述

方法二: 主要是运用element ui 中的el-scrollbar组件，将dialog的body部分包裹起来。代码如下：

// 内容

  
    
      
      
        
          {{ message }}
        
      
    
  

// 样式，只设置了个行高

  .content-box{
    line-height: 30px;
  }

具体效果：

在这里插入图片描述

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/1149672483.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐