AI 助理
备案控制台
开发者社区 云计算 文章 正文

element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动

2024-02-27 258
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动

app.vue style部分添加以下内容： 

.el-dialog {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  overflow-y: scroll !important;
  max-height: 100vh !important;
}

即可实现

多加点香菜85
目录
相关文章
蒾酒
|
7月前
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
蒾酒
1743 0
cafehaus
element-ui下拉框el-select多选出现滚动条闪现
弹窗组件中放置了el-select下拉框组件，多选项较多时，聚焦弹出下拉选择框时，下方会出现一个横向滚动条闪现一下，虽然不影响使用，但是作为一个追求完美的码农肯定是受不了
cafehaus
185 0
编程达人
element-plus：Dialog 对话框在有滚动条的页面会抖动
element-plus：Dialog 对话框在有滚动条的页面会抖动
编程达人
507 0
element-plus：Dialog 对话框在有滚动条的页面会抖动
朝阳39
|
5月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据，鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据，鼠标悬浮显示超长内容
朝阳39
738 3
朝阳39
|
5月前
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动，跟随页面一起滚动，获取滚动距离，隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动，跟随页面一起滚动，获取滚动距离，隐藏水平滚动条等
朝阳39
1249 0
你挚爱的强哥
|
7月前
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
你挚爱的强哥
268 0
掘金防诈骗集团CEO
|
7月前
|
前端开发
微信拖拽盒子movable-view点击事件失效问题
微信拖拽盒子movable-view点击事件失效问题
掘金防诈骗集团CEO
107 0
你挚爱的强哥
|
7月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动
你挚爱的强哥
209 0
前端李十三
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
前端李十三
444 1
秋叶原的琴音
|
JavaScript 前端开发
u-sticky吸顶和u-dropdown使用导致页面无法滚动问题及解决 页面无法滚动问题解决
u-sticky吸顶和u-dropdown使用导致页面无法滚动问题及解决 页面无法滚动问题解决
秋叶原的琴音
386 0