Element UI 弹窗(Dialog)改成自适应高度,仅body内容部分滚动

定义样式如下: 

.abow_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
    .el-dialog {
        margin: 0 auto !important;
        height: 90%;
        overflow: hidden;
        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
}

在el-dialog标签中设置class="abow_dialog"即可

弹窗为页面高度的90%,且上下居中。

el-dialog__body内容部分会根据内容的高度,自动显示上下的滚动条。

结合《directive全局定义侦听window.resize,局部绑定侦听宽高的变化》

可实现如下图效果:

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 回答:为了让dialog内容自适应,可以给其设置max-width和max-height属性,同时使用overflow:auto属性来实现滚动条的显示。具体实现方式可以参考CSS中的flex布局、grid布局、响应式设计等相关知识。 ### 回答2: elementdialog内容自适应是指dialog组件能够根据内容的长度自动调整大小,以确保内容完整显示,并适配不同屏幕尺寸。 实现dialog内容自适应可以通过以下方式进行: 1. 文字内容自动换行:当内容超过dialog的宽度时,文字会自动换行以确保每行文字都完整显示。这样无论内容多少,都能完整显示在对话框内。 2. 内容高度自动调整:如果对话框中的内容长度过长,可以使对话框的高度自动调整以适应内容的长度。这样即使有很多文字,也能够完整展示在对话框内,无需滚动查看。 3. 对话框宽度自适应:如果内容过宽,对话框的宽度可以根据内容长度动态调整。这样无论内容有多宽,都能够保证完整显示。 通过以上方式,可以实现elementdialog内容自适应,使其能够根据内容的长度自动调整大小,保证内容的完整展示,并适配不同屏幕尺寸。这样用户无论在任何设备上使用对话框,都能够方便地查看所有内容,并有更好的使用体验。 ### 回答3: elementdialog组件是一个常用的对话框组件,它的内容可以自适应大小。通过调整dialog组件的内容区域的宽度和高度,可以实现内容自适应。 首先,可以设置dialog组件的宽度为一个固定值或百分比,这样会根据设定的宽度来自动调整内容的大小。例如,可以设置宽度为80%。dialog组件会自动根据屏幕的宽度计算出内容区域的宽度,并根据内容的大小进行调整。 其次,可以设置dialog组件的高度为auto,这样会根据内容高度来自动调整对话框的高度。当对话框中的内容超过了设定的高度时,会自动出现滚动条。这样可以确保对话框的内容不会被裁剪,并且可以适应不同高度内容。 另外,element框架还提供了一些其他的组件来辅助实现内容自适应。例如,可以使用collapse组件来显示折叠内容,在需要时展开。这样可以节省空间,并且根据内容的大小自动调整对话框的高度。 总之,elementdialog组件提供了灵活的方式来实现内容自适应。可以通过设置宽度和高度以及使用其他辅助组件来实现对话框内容自适应大小,以满足不同场景的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值