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

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

2024-02-27 256
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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的样式修改字体颜色、下划线、选中/未选中
蒾酒
1734 0
cafehaus
element-ui下拉框el-select多选出现滚动条闪现
弹窗组件中放置了el-select下拉框组件，多选项较多时，聚焦弹出下拉选择框时，下方会出现一个横向滚动条闪现一下，虽然不影响使用，但是作为一个追求完美的码农肯定是受不了
cafehaus
185 0
编程达人
element-plus：Dialog 对话框在有滚动条的页面会抖动
element-plus：Dialog 对话框在有滚动条的页面会抖动
编程达人
506 0
element-plus：Dialog 对话框在有滚动条的页面会抖动
rp54yl2b5rw2w
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
rp54yl2b5rw2w
2812 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
Lux_Sun
Element UI - el-scrollbar 如何隐藏横向滚动条？
Element UI - el-scrollbar 如何隐藏横向滚动条？
Lux_Sun
623 0
埃尔文
|
3月前
|
JavaScript
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
该方案通过自定义Vue指令实现ElementUI的`el-dialog`弹窗的拖拽和最大化功能。只需在`main.js`中引入并注册指令，然后在Vue组件中绑定指令即可。支持自定义参数控制是否允许最大化和拖拽，并提供最大化后的回调函数。具体使用方法详见示例代码。
埃尔文
449 0
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
朝阳39
|
5月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据，鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据，鼠标悬浮显示超长内容
朝阳39
736 3
朝阳39
|
5月前
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动，跟随页面一起滚动，获取滚动距离，隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动，跟随页面一起滚动，获取滚动距离，隐藏水平滚动条等
朝阳39
1246 0
你挚爱的强哥
|
7月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动
你挚爱的强哥
206 0
前端李十三
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
前端李十三
444 1

热门文章

最新文章

  • 1
    Hive之数据倾斜的原因和解决方法
  • 2
    【Java】留下没有基础眼泪的面试题
  • 3
    四大触点，教你从“用户视角”构建数据分析体系
  • 4
    CentOS7 yum的一次报错" 14: curl#56 - "Recv failure: Connection reset by peer" "
  • 5
    [软件工程导论(第六版)]第5章 总体设计（课后习题详解）
  • 6
    同步、异步、阻塞、非阻塞
  • 7
    ArcEngine控制台应用程序
  • 8
    perl学习笔记(10)
  • 9
    新疆电信新疆联通签网络合作协议
  • 10
    epoll是如何监控多个描述符及如何获得通知(2)
  • 1
    《C++数据降维之道：PCA 与 t - SNE 助力信息留存》
    38
  • 2
    「Mac畅玩鸿蒙与硬件44」UI互动应用篇21 - 随机励志语录生成器
    52
  • 3
    《C++赋能智能摄像头：开启实时视频分析新纪元》
    41
  • 4
    MV-Adapter：上交大、北航和 VAST 等联合开源多视图一致图像生成模型，将预训练的文生图扩散模型转为多视图生成器
    47
  • 5
    《C++与 BLAS、LAPACK：加速人工智能算法的线性代数秘籍》
    42
  • 6
    Manga Image Translator：开源的漫画文字翻译工具，支持多语言翻译并嵌入原图，保持漫画的原始风格和布局
    33
  • 7
    NodeTool：AI 工作流可视化构建器，通过拖放节点设计复杂的工作流，集成 OpenAI 等多个平台
    34
  • 8
    《C++与 Armadillo：线性代数助力人工智能算法简化之路》
    24
  • 9
    ColorFlow：腾讯和清华大学联合推出的图像序列着色模型，通过参考图像的颜色对黑白漫画进行着色生成彩色漫画
    32
  • 10
    《C++与 ONNX：构建跨平台推理引擎的智慧融合》
    22

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云oss存储简介和如何使用