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

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

2024-02-27 1149
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
1608894488064704
|
开发者
这款酷似飞书文档的工具开源了，支持私有部署！！！
这个酷似飞书文档的工具真的非常好用，体验和飞书差不多，同样支持 Markdown 语法，经常使用 Markdown 写文档的同学一定要试试了，相信你一定会喜欢上它，这个工具是我用差不多20天左右的时间开发的，而且它的前后端项目现在都已经开源了，如果你能帮我推广那我更是感激不尽。所以，如果你想有一个可以私有部署的文档工具，而且体验还特别棒的的，那就快来试试这个吧，相信它不会让你失望的。
1608894488064704
2906 0
前端李十三
|
前端开发
饿了么el-dialog自定义内容以及el-dialog自定义样式
饿了么el-dialog自定义内容以及el-dialog自定义样式
前端李十三
1518 0
fruge365
|
JavaScript
【vue】 vue-seamless-scroll 无缝滚动依赖
【vue】 vue-seamless-scroll 无缝滚动依赖
fruge365
2434 1
theMuseCatcher
|
移动开发 资源调度 JavaScript
Vue2使用触摸滑动插件（Swiper）
这篇文章介绍了在Vue 3框架中如何使用Swiper插件来创建不同类型的触摸滑动组件，包括轮播图、淡入淡出效果和走马灯效果，并提供了详细的配置选项和使用示例。
theMuseCatcher
1601 1
Vue2使用触摸滑动插件（Swiper）
nanshaws
|
网络协议 前端开发
netty的TCP服务端和客户端实现
本文介绍了使用Netty框架实现TCP服务端和客户端的步骤，包括添加Netty依赖、编写服务端和客户端的代码，涉及NioEventLoopGroup、ServerBootstrap、Bootstrap、ChannelInitializer等核心组件，以及如何启动服务端监听和客户端连接。
nanshaws
1309 4
埃尔文
|
JavaScript
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
该方案通过自定义Vue指令实现ElementUI的`el-dialog`弹窗的拖拽和最大化功能。只需在`main.js`中引入并注册指令，然后在Vue组件中绑定指令即可。支持自定义参数控制是否允许最大化和拖拽，并提供最大化后的回调函数。具体使用方法详见示例代码。
埃尔文
3316 0
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
Yaiba123
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化，如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果？本文给你答案！
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化，包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果，并提供了详细的代码示例和实现效果。
Yaiba123
5023 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化，如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果？本文给你答案！
Yaiba123
|
前端开发 Java C++
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
使用Vite和Vue3构建支持共享组件和分模块独立打包的前端项目的方法。
Yaiba123
2003 0
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
她说她一如既往的爱我
el-upload中的before-upload不生效
el-upload中的before-upload不生效
她说她一如既往的爱我
1499 3
kgmh2cwvierzy
|
移动开发 前端开发 JavaScript
前端代码规范
前端开发工具组件的广泛应用提升了开发效率，但也带来了代码管理和维护的挑战。为解决这一问题，各团队制定了相应的代码规范。良好的代码规范不仅提升个人代码质量，还便于团队协作。本文从命名、HTML、CSS、JavaScript等方面详细介绍了前端代码规范，强调简洁、有条理、易读的重要性。遵循这些规范，有助于提高开发效率和代码质量。
kgmh2cwvierzy
1353 0

热门文章

最新文章

  • 1
    阿里视频云最强转码技术揭秘：窄带高清原理解析+用户接入指南
  • 2
    使用Python模拟设备接入阿里云物联网的MQTT服务器
  • 3
    Knative 系列文章目录
  • 4
    阿里云TSDB在大数据集群监控中的方案与实战
  • 5
    C#与JAVA线程间同步实现比较
  • 6
    2016大数据创新大赛——机场客流量的时空分布预测模型解析
  • 7
    机器学习与数据科学决策树指南
  • 8
    DataWorks中业务日期和定时时间的理解
  • 9
    黑盒测试与白盒测试的区别
  • 10
    java.lang.ClassCastException: sun.proxy.$Proxy11 cannot be cast to分析
  • 1
    2026 企业上云全攻略：阿里云主流核心云产品 ECS云服务器、OSS、RDS解析、优惠活动、CLI实操与成本省钱完整指南（99计划、年中加速季、迁云补贴，企业采购与自动化运维）
    43
  • 2
    CC Switch下载+安装+使用5分钟搞定（Win/Mac/Linux全支持）
    62
  • 3
    【保姆级】Android Studio下载、安装和汉化教程（2026最新）
    99
  • 4
    阿里云新老用户、企业用户轻量 / ECS / EGS GPU 云服务器全价目解析：新购、续费、升级全套配置价格表与选型指南及避坑汇总
    38
  • 5
    Token Plan如何使用？快速接入订阅阿里云百炼Token Plan团队版，获取 API Key 和 Base URL全流程
    29
  • 6
    GLM-5.2的1M上下文实测：我用它改造了一套祖传测试平台，22万行代码AI全迁完了
    37
  • 7
    上千条用例跑四十分钟却拦不住缺陷：用变异测试给回归集算笔经济账
    25
  • 8
    校招数据库高频题：用一次并发转账讲透死锁、重试与资金不变量
    27
  • 9
    HappyHorse‑1.1国产AI视频生成全解：单流Transformer架构、三大生成模式API实战完整教程
    35
  • 10
    通义千问（Qwen）全栈深度解析：模型矩阵、底层MoE架构、API实战与企业选型落地完整教程
    45

    • 相关电子书

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