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

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

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

仙鹤童子```
目录
相关文章
小吴吴吴呀
|
JavaScript
Vue引入字节跳动图标库
Vue引入字节跳动图标库
小吴吴吴呀
908 0
Vue引入字节跳动图标库
锅盖哒
|
资源调度 JavaScript 数据处理
Vue3 导出word
Vue3 导出word
锅盖哒
1391 0
晚来南风晚相识
element-ui 中dialog居中
element-ui 中dialog居中
晚来南风晚相识
867 0
多加点香菜85
element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
多加点香菜85
1172 0
埃尔文
|
JavaScript
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
该方案通过自定义Vue指令实现ElementUI的`el-dialog`弹窗的拖拽和最大化功能。只需在`main.js`中引入并注册指令，然后在Vue组件中绑定指令即可。支持自定义参数控制是否允许最大化和拖拽，并提供最大化后的回调函数。具体使用方法详见示例代码。
埃尔文
3364 0
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
fruge365
【vue2】切换页面之后滚动条停留在上个页面的位置，解决方案
【vue2】切换页面之后滚动条停留在上个页面的位置，解决方案
fruge365
1250 6
朝阳39
Element UI 日期选择器el-date-picker禁止选择指定日期（禁止选择过去，禁止选择未来）【含是否包含今天】
Element UI 日期选择器el-date-picker禁止选择指定日期（禁止选择过去，禁止选择未来）【含是否包含今天】
朝阳39
1420 3
fruge365
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
fruge365
1033 0
无妄的罪
|
缓存 JavaScript
onActivated 生命周期的使用和介绍
onActivated 生命周期的使用和介绍
无妄的罪
1134 3
朝阳39
Element UI 【表格合计】el-table 实战范例 -- 添加单位，自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位，自定义计算逻辑
朝阳39
1288 0

热门文章

最新文章

  • 1
    Docker Hub 镜像拉取超时：1Panel面板中应用安装失败的临时解决方案
  • 2
    新用户100万token免费额度！阿里云上线DeepSeek-R1满血版
  • 3
    Java程序员如何做代码压力测试？【JWordPress前台项目实战】
  • 4
    Docker with Spring Boot
  • 5
    深入理解JVM《垃圾收集（GC）机制与算法 - 宇宙的清洁工》
  • 6
    SCN试验之一
  • 7
    静态文件
  • 8
    SWIFT学习笔记01
  • 9
    ECHO.js 纯javascript轻量级延迟加载
  • 10
    HDOJ(HDU) 2212 DFS(阶乘相关、)
  • 1
    弱口令候选验证 POC：Python + Nuclei
    42
  • 2
    打字乐园：一个为零基础孩子设计的纯前端指法打字练习（MIT 开源）
    51
  • 3
    【2026最新】Dev C++下载、安装、使用保姆级指南（附官方安装包）
    37
  • 4
    万小智AI建站版本有什么区别？标准版和高级版的阿里云万小智对比，看看哪个划算？
    32
  • 5
    阿里云轻量应用服务器怎么样？200M峰值公网带宽、无固定流量真的可以吗？
    28
  • 6
    Token Plan版本如何选择？个人版Lite和Standard哪个更划算？
    33
  • 7
    企业AI问数防幻觉实战：语义层、确定性计算与校验链路，Dora的工程化方案
    49
  • 8
    【保姆级】Homebrew安装、配置和常用命令大全（4种安装方式，2026最新实测）
    41
  • 9
    Agent Memory 开发设计：从入门到避坑
    39
  • 10
    【2026最新版】VirtualBox下载安装保姆级教程（从零搭建VirtualBox虚拟机）
    61

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！