ElementUI中dialog弹出框高度处理
elementui 处理 高度 弹出 Dialog
2023-09-11 14:19:18 时间
样式
我们需要在style
标签中写上如下的样式,这里使用的less
或者scss
.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%,且上下居中
相关文章
- elementUI 金额输入框实现
- Vue - 在纯 JS 文件中调用自定义组件 / 类似 ElementUI 弹框组件 Message、Modal(在纯 js 文件中通过 import 方式引入并调用弹框模态框组件显示出来,)
- elementui默认样式修改的几种方法
- vue实战入门进阶篇八:vue+elementui实现网站后台-内容配置界面实现
- vue实战入门进阶篇三:vue+elementui实现网站后台-系统框架搭建
- vue实战入门进阶篇二:vue+elementui实现网站后台-登录界面实现
- ElementUI的loading状态的使用
- 解决使用elementUI框架el-upload上传组件时session丢失问题
- Vue+ElementUI 导航组件
- ElementUI日期选择器时间选择范围限制
- Vue上传文件:ElementUI中的upload实现
- ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
- 关于 ElementUI 通知组件 notification 重叠问题的解决方案