el-dialog 垂直居中

news2024/11/29 12:48:18

        写文章总是在想引言,怎么开头才会显的更加优雅,更加让读者朋友给我点赞。看到有人点赞,我就觉的进行技术经验分享是一件非常愉快的事情,可是打小作文写的不好不会组织语句,就喜欢直来直去。老师说让写春天的作文,我则会写春天真绿啊。。。老师布置让写秋天的作文,我则会写秋天真让人看着凄凉蛋疼啊。。然后就被老师一顿胖揍。。。

        哈哈哈,最近莫名其妙的喜欢分享一些开发中的细枝末叶,其实更想将这些东西形成系统的材料进行分享,奈何中年大叔心有余而力不足,只好一点点的随着心情去崩发出来,写多少字儿就多少字吧,总之看着实用,有价值就好。

el-dialog这个布局不知道遵循什么用户体验标准,弹出来这个页面体验确实不够好,闲来无事看到了,就研究研究。

你看,垂直居中就好看多了!!

<style lang="scss" scoped>  

::v-deep .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);
}

::v-deep  .el-dialog .el-dialog__body{
    flex:1;
    overflow: auto;
}
</style>

 

flex:1;
overflow: auto; 

需要注意的是这两行样式虽然不写也没问题,但是当你的窗口缩小或者放大的时候,
你会发现,你的页面的子页面就冒头或者是掇底了,所以一定要记得加上这两行属性,
这样当窗口缩小或者放大的时候它会出现滚动条把你的内容死死的框住啦。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1286215.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue2 element-ui select下拉框 选择传递多个参数

<el-select v-model"select" slot"prepend" placeholder"请选择" change"searchPostFn($event,123)"> <el-option :label"item.ziDianShuJu" :value"{value:item.id, label:item.ziDianShuJu}" v-for&qu…

文件夹批量改名:轻松管理文件夹,随机重命名不求人

在日常生活和工作中&#xff0c;文件夹批量改名是一个常见的需求。当有大量的文件夹时&#xff0c;它们可能会变得混乱和难以管理。有时候要对大量的文件夹进行重命名&#xff0c;以便更好地组织和管理这些文件。手动重命名每个文件夹可能会非常耗时且容易出错。现在可以来看下…

印度股市荣登全球第四,释放了什么讯号?

KlipC报道&#xff1a;随着散户迅速增加&#xff0c;外国资金重新流入&#xff0c;自2020年3月大流行低点以来&#xff0c;截至当地时间12月4日&#xff0c;其印度股市总市值已经上涨到3.93万亿美元&#xff0c;仅次于美国、中国和日本。 值得一提的是&#xff0c;Sensex指数飙…

java springboot简单了解数据源实现 与 springboot内置数据源

之前 我们讲到的项目 数据库管理 用了三种技术 数据源管理方式 我们选择了: DruidDataSource 持久化技术: MyBatis-Plus / MyBatis 数据库: MySql 那么 我们在刚接触数据库连接时 是没用配置Druid的 那它有没有用数据源呢&#xff1f; 我们接触过的配置Druid的方式有两种 用…

CSS特效026:扇骨打开关闭的动画

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…

xcode ——Instrumets(网络连接调试)使用

环境&#xff1a; instruments 使用只能在真机调试时使用&#xff0c;且真机系统必须ios15 点击debug 按钮——Network——Profile in Instruments 然后就可以看到如下面板 展开运行的项目&#xff0c;点击session下的域名&#xff0c;下方回出现该域名下的网络请求。点击Deve…

持续集成交付CICD:Jenkins使用GitLab共享库实现前后端项目Sonarqube

目录 一、实验 1.Jenkins使用GitLab共享库实现后端项目Sonarqube 2.优化GitLab共享库 3.Jenkins使用GitLab共享库实现前端项目Sonarqube 二、问题 1.sonar-scanner 未找到命令 2.npm 未找到命令 一、实验 1.Jenkins使用GitLab共享库实现后端项目Sonarqube &#xff08…

现代版“田忌赛马”:IPMT如何实现资源利用最大化

摘要&#xff1a;在流程调整和产品重整过程中&#xff0c;IPMT发挥了至关重要的作用。IPMT是什么&#xff1f;它的职责到底是什么&#xff1f;每个公司必须要有IPMT吗&#xff1f; 1992年&#xff0c;IBM在激烈的市场竞争下&#xff0c;遭遇到了严重的财政困难&#xff0c;利润…

用js自定义一个(v-model)vModel双向绑定函数

vue中的v-model是双向绑定的, 我们自己用JavaScript实现一个双向绑定vModel函数。 // element 元素或者#id,.class,div 得是input标签 // data 对象 // 将要绑定property 对象中的key<input class"vmodel"/>function vModel(element, data, property) {if (…

外汇天眼:假冒、非法经营成常态?超60家外汇平台被拉黑

近期&#xff0c;全球范围内多个国家的金融监管机构纷纷发出警告&#xff0c;揭露一系列假冒、非法经营的外汇交易平台。比利时金融服务和市场管理局&#xff08;FSMA&#xff09;发现53家外汇平台涉嫌非法运营&#xff0c;而意大利CONSOB和英国金融行为监管局&#xff08;FCA&…

【Redis】Redis 的学习教程(十三)Redis 各场景

由于Redis 支持比较丰富的数据结构&#xff0c;因此他能实现的功能并不仅限于缓存&#xff0c;而是可以运用到各种业务场景中&#xff0c;开发出既简洁、又高效的系统 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-bo…

Ribbon 饥饿加载

Ribbon默认是采用懒加载&#xff0c;即第一次访问时才会去创建LoadBalanceClient&#xff0c;请求时间会很长而饥饿加载则会在项目启动时创建&#xff0c;降低第一次访问的耗时&#xff0c;通过下面配置开启饥饿加载: 一、懒加载 Ribbon 默认为懒加载即在首次启动Application…

防火墙 iptables的使用

目录 什么是防火墙 原理 代理 防火墙的工具 4表5列 五链&#xff1a;控制流量的时机 四个表&#xff1a;如何控制流量 ​编辑 iptables 软件 格式 选项 跳转 查iptables 的规则 添加规则 A I 删除规则 清空规则 替换规则 R 修改默认规则&#xff08;默…

vue2-省市县三级联动选择框

Json数据&#xff1a;https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json 如何访问本地文件参考&#xff1a;vue-访问本地json文件_vue3读取json文件-CSDN博客 .vue文件&#xff1a; <template><select v-model"mailAddress1" style…

调查显示 IT 服务事件越来越频繁

事件管理平台提供商 Transposit 对美国 1,000 名 IT 运营、DevOps、站点可靠性工程 (SRE) 和平台工程专业人士进行的一项调查发现&#xff0c;超过三分之二 (67%) 的人发现故障率有所增加过去 12 个月中影响客户的服务事件的频率。 今天在Kubecon CloudNative会议上宣布的调查…

在 AlmaLinux 9.2 上安装Oracle Database 23c

在 AlmaLinux 9.2 上安装Oracle Database 23c 1. 安装 Oracle Database 23c2. 连接 Oracle Database 23c3. 重启启动后&#xff0c;手动启动数据库4. 重启启动后&#xff0c;手动启动 Listener5. 手动启动 Pluggable Database6. 自动启动 Pluggable Database7. 设置开机启动数据…

PDF控件Spire.PDF for .NET【转换】演示:将 SVG 转换为 PDF

SVG 是一种矢量图形文件格式&#xff0c;用于创建可缩放且不损失质量的图像。然而&#xff0c;PDF由于支持高质量打印、加密、数字签名等功能&#xff0c;更适合共享和打印。将SVG转换为PDF可以保证图像在不同设备和环境下都有良好的显示效果&#xff0c;并更好地保护知识产权。…

ubuntu启动kafka报错Could not create the Java Virtual Machine.

网上有两种方式&#xff0c;但是需要具体看自己的错误信息&#xff0c;我的错误信息如下: 这里大概是说要写入日志无权限&#xff0c;所以执行的时候&#xff0c;前面加一下sudo 执行成功。

LeetCode - 110. 平衡二叉树(C语言,二叉树,配图,简单)

根据题意&#xff0c;我们只需要比较当前节点的左右子树高度差是否小于1&#xff0c;利用分治法&#xff0c;只需要满足&#xff1a; 1. 根节点的左右子树的高度差小于1。 2. 根节点左右子树的满足高度差小于1&#xff0c;在往下走&#xff0c;判断左子树根节点的左右子树是否满…

MySQL之binlog文件过多处理方法

背景 MySQL由于大量读写&#xff0c;导致binlog文件特别的多。从而导致服务器disk空间不足问题。 先备份binlog文件 tar -zcvf mysql.tar.gz mysql/data/mysql-bin.00* 修改MySQL配置 binlog过期时间 show variables like expire_logs_days; 这里 0 表示 永不过期 如果为 n…