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

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

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

仙鹤童子```
目录
相关文章
蒾酒
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
蒾酒
3666 0
No8g攻城狮
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
No8g攻城狮
3100 0
七维大脑
|
前端开发
若依(ruoyi)前端Vue3 Element Plus Vite版样式修改
若依(ruoyi)前端Vue3 Element Plus Vite版样式修改
七维大脑
2653 0
rp54yl2b5rw2w
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
rp54yl2b5rw2w
3314 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
仙鹤童子```
element-plus：el-table自定义展开图标处于列的位置
element-plus：el-table自定义展开图标处于列的位置
仙鹤童子```
1230 0
GoodTime
ECharts 饼图数据放在饼图内部显示
ECharts 饼图数据放在饼图内部显示
GoodTime
906 0
XinMo
input、el-input输入框只能输入正整数（包含或不包含0)
业务
XinMo
8339 0
埃尔文
|
JavaScript
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
该方案通过自定义Vue指令实现ElementUI的`el-dialog`弹窗的拖拽和最大化功能。只需在`main.js`中引入并注册指令，然后在Vue组件中绑定指令即可。支持自定义参数控制是否允许最大化和拖拽，并提供最大化后的回调函数。具体使用方法详见示例代码。
埃尔文
2303 0
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
多加点香菜85
element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
多加点香菜85
715 0
周一同学Zelina
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont，包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
周一同学Zelina
2632 3

热门文章

最新文章

  • 1
    sudo apt-get update提示E: 仓库 “http://mirrors.aliyun.com/ubuntu eoan Release” 没有 Release 文件。亲试解决办法
  • 2
    Apache Flink 的迁移之路，2 年处理效果提升 5 倍
  • 3
    kettle用命令行执行ktr和kjb
  • 4
    阿里云商标优选官网入口链接地址（明码标价）
  • 5
    Mysql5.7安装超详细教学
  • 6
    docker pull 相关配置
  • 7
    ? error: cannot open C:\Users???\AppData\Local\Temp\main.obj.5136.0.jom for write
  • 8
    adpatch options=hotpatch 适用于大小小于1M 的小补丁，不适合大补丁
  • 9
    Current Analysis：安全和价值是物联网最大障碍
  • 10
    CentOS虚拟机如何设置共享文件夹，并在Windows下映射网络驱动器？
  • 1
    Coze vs Dify vs n8n：三大AI智能体开发平台全面对比
    84
  • 2
    2025年开源AI知识库深度体验：PandaWiki重新定义企业知识管理
    78
  • 3
    Oracle 数据塑形：行列转换与集合运算
    38
  • 4
    构建AI智能体：五十三、反应式应急+深思式优化：反应速度与规划智慧的平衡
    59
  • 5
    云时代的身份安全：别再靠“密码123456”扛风险了
    55
  • 6
    别再把 Collector 当黑箱：OpenTelemetry Collector 拓展与自定义处理器实战指南
    49
  • 7
    为什么企业离不开元数据管理？——因为数据混乱，比加班更可怕！
    33
  • 8
    《游戏公会系统激活活跃度与筑牢归属感的实战指南》
    48
  • 9
    《新手零抵触的教学引导设计指南》
    28
  • 10
    阿里云搭建网站收费标准:自建网站、云小智AI建站和云企业官网价格更新
    51

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云服务器快照备份数据怎么下载到本地保存？