当前位置: 首页 > news >正文

el-dialog 垂直居中

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

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

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

相关文章:

  • Fiddler抓包模拟器(雷电模拟器)
  • Android File Transfer for Mac:畅享强大的安卓文件传输工具
  • GO基础之变量与常量
  • TCP协议实现一对一聊天
  • XunSearch 讯搜 error: storage size of ‘methods_bufferevent’ isn’t known
  • html实现各种好看的鼠标滑过图片特效模板
  • 一个 postman实现参数化让我丢掉了一份20k的offer
  • 数论——质数
  • Mysql 日期函数大全
  • C语言期末考试复习PTA数据类型及表达式-分支结构程序-循环结构-数组经典选择题
  • 渗透测试学习day6
  • 第二十一章总结
  • HDFS常见题
  • ALTERNET STUDIO 9.1 Crack
  • 在Pytorch中使用Tensorboard可视化训练过程
  • 【css3】浏览器内核及其兼容性
  • canvas 五子棋游戏
  • Javascript基础之Array数组API
  • Redis字符串类型内部编码剖析
  • Sass Day-01
  • 百度地图API标注+时间轴组件
  • 前端
  • 手机app有了短信验证码还有没必要有图片验证码?
  • 算法-插入排序
  • 为什么要用IPython/Jupyter?
  • 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
  • 用 vue 组件自定义 v-model, 实现一个 Tab 组件。
  • const的用法,特别是用在函数前面与后面的区别
  • 阿里云重庆大学大数据训练营落地分享
  • 湖北分布式智能数据采集方法有哪些?
  • ​MPV,汽车产品里一个特殊品类的进化过程
  • ###C语言程序设计-----C语言学习(6)#
  • $(selector).each()和$.each()的区别
  • (1/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (22)C#传智:复习,多态虚方法抽象类接口,静态类,String与StringBuilder,集合泛型List与Dictionary,文件类,结构与类的区别
  • (论文阅读31/100)Stacked hourglass networks for human pose estimation
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理 第13章 项目资源管理(七)
  • (转)清华学霸演讲稿:永远不要说你已经尽力了
  • (自适应手机端)响应式新闻博客知识类pbootcms网站模板 自媒体运营博客网站源码下载
  • .halo勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET Core 通过 Ef Core 操作 Mysql
  • .net core控制台应用程序初识
  • .NET Core引入性能分析引导优化
  • .NET(C#) Internals: as a developer, .net framework in my eyes
  • .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)
  • .NET与java的MVC模式(2):struts2核心工作流程与原理
  • ?php echo ?,?php echo Hello world!;?
  • @Autowired和@Resource的区别
  • @param注解什么意思_9000字,通俗易懂的讲解下Java注解
  • @property括号内属性讲解
  • @在php中起什么作用?
  • [100天算法】-目标和(day 79)
  • [ACTF2020 新生赛]Include
  • [AIGC] SQL中的数据添加和操作:数据类型介绍
  • [AIGC] 如何建立和优化你的工作流?