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

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

2023-08-01 1985
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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;
}


之后的效果：dialog上下左右在视口居中、过长body不在出现滚动条，开启内滚动（dialog最高100vh）

仙鹤童子```
目录
相关文章
rp54yl2b5rw2w
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
rp54yl2b5rw2w
3173 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
蒾酒
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
蒾酒
3353 0
七维大脑
|
前端开发
若依(ruoyi)前端Vue3 Element Plus Vite版样式修改
若依(ruoyi)前端Vue3 Element Plus Vite版样式修改
七维大脑
2364 0
No8g攻城狮
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
No8g攻城狮
2421 0
仙鹤童子```
element-plus：el-table自定义展开图标处于列的位置
element-plus：el-table自定义展开图标处于列的位置
仙鹤童子```
1115 0
编程达人
element-plus：Dialog 对话框在有滚动条的页面会抖动
element-plus：Dialog 对话框在有滚动条的页面会抖动
编程达人
822 0
element-plus：Dialog 对话框在有滚动条的页面会抖动
埃尔文
|
JavaScript
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
该方案通过自定义Vue指令实现ElementUI的`el-dialog`弹窗的拖拽和最大化功能。只需在`main.js`中引入并注册指令，然后在Vue组件中绑定指令即可。支持自定义参数控制是否允许最大化和拖拽，并提供最大化后的回调函数。具体使用方法详见示例代码。
埃尔文
1881 0
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
码喽的自我修养
el-dialog使用::v-deep()穿透设置样式不生效，解决办法亲测有效！
el-dialog使用::v-deep()穿透设置样式不生效，解决办法亲测有效！
码喽的自我修养
2335 0
多加点香菜85
element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
多加点香菜85
608 0
theMuseCatcher
|
移动开发 资源调度 JavaScript
Vue移动端网页（H5）预览pdf文件（pdfh5和vue-pdf）
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览，包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
theMuseCatcher
8219 1
Vue移动端网页（H5）预览pdf文件（pdfh5和vue-pdf）