问题描述

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

方法一: 具体代码如下：

// 内容
<template><el-dialog:title="title":visible.sync="dialogVisible"class="showAll_dialog"width="1000px"></el-dialog>
</template>// 样式
<style lang="scss" scoped>
// 修改对话框高度.showAll_dialog {display: flex;justify-content: center;align-items: center;overflow: hidden;::v-deep .el-dialog {margin: 0 auto !important;height: 80%;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部分包裹起来。代码如下：

// 内容
<template><div><el-dialog:visible.sync="dialogVisible"width="836px"@closed="handleClose"><!-- 设置对话框内容高度 --><div style="height:70vh"><el-scrollbar><div class="content-box">{{ message }}</div></el-scrollbar></div></el-dialog></div>
</template>
// 样式，只设置了个行高
<style lang="scss" scoped>.content-box{line-height: 30px;}
</style>

具体效果：

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

element ui dialog 对话框设置fullscreen_UI设计中的弹窗设计素材，技巧快get起来
弹窗弹窗是指打开网页.软件.手机APP等的时候自动弹出的窗口.(百度百科) 弹窗作用 (1)中断用户当前操作,对其作出补充 (2)中断用户当前操作,对其作出反馈弹窗类型 (1)模态弹窗 (2)非模 ...
Element ui Dialog 对话框遮罩层挡住对话框问题
1.当遮罩层挡住对话框需要点击很多下才能使对话框高亮这里不可能让客户点击这么多下的,肯定是代码出现了问题,原来的代码: el-dialog 哪怕添加append-to-body=true 也是会出现 ...
Element Ui 关闭对话框清空验证消息，清除form表单的操作
方法1 首先在对话框取消按钮添加 click事件,例如:(ps:callOf 里面的addGroupData和ref - - ) <div slot="footer" c ...
element UI dialog点击dialog区域外会关闭dialog
需求描述今天,在做Element+Vue项目时遇到一个需求:甲方要求在Dialog打开状态下,点击该Dialog以外的区域会导致该Dialog关闭:正确的状态应该是只有在点击关闭按钮,或者是Dial ...
element ui dialog custom-class不生效最终解决办法
官网: Element - The world's most popular Vue UI frameworkElement,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库h ...
Element ui —— dialog 弹窗设置点击空白处不关闭
element-ui 的dialog弹窗 ,默认的点击空白处也就是非弹窗区会关闭,有时候不太合适,所以要设置为不可关闭,它本身自带该功能: 把这个属性设置为false即可 <el-dialog ...
记录element ui dialog弹框生命周期问题
今天在开发中遇到一个问题,描述如下: 点击编辑然后将列表中的数据回显出来: 场景为这样: 这个弹框是一个组件,通过父子组件传参将参数传递过去,问题是我在什么时候回显数据呢? 应该是在组件被创建时,也就 ...
element ui 对话框改模仿苹果手机预览视图
修改了一下 element ui的对话框做一个手机模拟预览的样式 <div class="look_box"><el-dial ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...

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

问题描述

具体效果：

具体效果：

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

最新文章

热门文章