Element Dialog水平垂直居中样式

最新推荐文章于 2024-04-20 20:00:00 发布
最新推荐文章于 2024-04-20 20:00:00 发布
阅读量3.3k 收藏 4
点赞数 1
分类专栏： Html+CSS Vue.js 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fooooooood/article/details/113257185
版权
本文介绍了如何修改Element UI的Dialog组件，使其达到水平垂直居中的效果。通过分享调整前后的样式截图和具体的代码实现，展示了最佳的解决方案。
摘要由CSDN通过智能技术生成

前言

Element UI 是目前最火的前端Vue.js UI组件库，但是Dialog默认样式并不是水平垂直居中，这就很让人很尴尬。不过对于有水平垂直居中的需求来说，我们是可以自己进行调整的。最常用的方法也试过了，最终得到以下方法是最佳的（我个人感觉），接下来和大家分享一下。

一、默认样式截图

在这里插入图片描述

 

二、调整后样式截图

在这里插入图片描述
 

三、代码如下：

App.vue

.el-dialog__wrapper
最低0.47元/天 解锁文章
fooooooood
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap 模态框（modal）实现水平垂直居中显示
08-31
总结来说，Bootstrap模态框的水平垂直居中可以通过监听模态框显示事件，结合JavaScript动态计算和设置样式来实现。这种方法灵活且易于实施，适用于大部分Bootstrap模态框的居中需求。在实际开发中，可以根据项目需求...
vue el-dialog 对话框居中显示
且听风吟的博客
08-28 2万+
el-dialog 貌似不设置样式的时候默认不居中显示，如下所示： 个人感觉居中好看一点，就修改了样式： .el-dialog { display: flex; flex-direction: column; margin:0 !important; position:absolute; top:50%; left:50%; ...
element-ui el-dialog如何设置响应式宽高且永远水平垂直居中
qq_2411868438的博客
04-27 1万+
写在前面 el-dialog是使平常使用element-ui比较常用的一个组件，想要灵活控制它达到想要的开发效果，就必须要熟悉它默认一些属性：默认width:50%，高度为标题和el-dialog__body，el-dialog__footer内容以及padding撑开，定位上默认水平居中，距离顶端15vh 具体实现 原理是width采用百分比，height赋值为vh，覆盖el-dialog默认的top:15vh改为top: 0vh，最后设置定位让它来水平垂直居中。 ...
快速解决element ui中el-dialog弹框组件垂直居中问题的方法
最新发布
weixin_69375569的博客
04-20 830
【代码】快速解决element ui中el-dialog弹框组件垂直居中问题的方法。
快速解决element中el-dialog弹框组件垂直居中问题的方法
热门推荐
Shids_的博客
10-12 12万+
快速解决element中el-dialog弹框组件垂直居中问题的方法
element dialog 垂直水平居中显示
天蚕土豆丝的博客
10-22 4504
如何让组件中的dialog在可视区域垂直水平居中 先将dialog放到body的下层，保证自己写的样式相对于视口区域生效。element dialog文档中有个append-to-body属性，将其设置为true,会将dialog扔到body下面。 再设置一个自定义dialog的class <el-dialog title="标题" custom-class="selfDialog" :visible.sync="dialogVisible" :append-to-body="true">
解决方法：Element UI设置dialog在视图居中显示，css设置dialog样式
lh_seckill的博客
11-26 3914
element设置dialog在视图居中显示 .el-dialog { display: flex; flex-direction: column; margin: 0 !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: calc(100% - 30px); max-width: calc(100% - 30px); }
el-dialog 拖拽及居中效果
萝卜砸大坑
11-28 9万+
el-dialog拖拽及改变大小 1.新建directive.js import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el) { //备注：可以改变类名使其它元素也实现拖拽效果 //鼠标点击拖拽区域 const dialogHeaderEl = ...
弹出层（遮罩层）弹出页面垂直居中
09-03
弹出层（遮罩层）弹出页面垂直居中，一个不错的例子，可拿来使用。
layer弹出层自适应高度,垂直水平居中的实现
10-16
`layer` 是一个常用的 JavaScript 弹窗插件，它提供了丰富的功能，包括弹出层的自适应高度和垂直水平居中。本文将详细讲解如何利用 `layer` 实现这些效果。 首先，我们来关注高度自适应的问题。在 `layer` 中，当弹...
Element Dialog对话框的使用示例
10-15
Element Dialog对话框是Element UI库中的一个核心组件，用于创建各种对话框，提供了一种在用户界面中展示信息、确认操作或进行交互的有效方式。它提供了丰富的定制化选项，可以轻松地集成到Vue.js项目中。 ### 基本...
使elementUI的dialog上下左右居中
绿葡萄的博客
09-27 2万+
.el-dialog{ display: flex; flex-direction: column; margin:0 !important; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); /*height:600px;*/ max-height:calc(100% ...
Vue项目中设置elementUI的el-dialog上下左右居中
qq_52940988的博客
04-03 5905
在app.vue的style里面添加下列代码即可 .el-dialog { display: flex; flex-direction: column; margin: 0 !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .el-dialog .el-dialog__body { flex: 1; ov
el-dialog水平垂直居中
weixin_46718285的博客
06-07 1131
【代码】el-dialog水平垂直居中。
element 弹窗dialog垂直居中
Lydia
01-05 955
【代码】element 弹窗dialog垂直居中。
el-dialog 内容居中
zhao_hong_ran的博客
12-01 1万+
原样：dialog 内容部分， 默认左对齐 目的：内容居中显示，比如表单 修改： .el-dialog .el-dialog__body{ display: flex; justify-content: center; align-items: center; }
element-ui中el-dialog使用技巧
weixin_42028153的博客
12-22 1万+
项目需求需要在弹框的标题行添加下载按钮，一开始看官方文档，没有找到解决方法，官方的按钮都是放在弹框底部的，官方文档中有个slot，没看懂啥意思，但是解决的方法就是它 利用插巢slot给el-dialog弹框标题添加下载按钮 <el-dialog v-dialogDrag top="25vh" :visible.sync="dialogFormVisible" append-to-body :cl

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值