优化elelment ui 的 dialog 样式

最新推荐文章于 2024-07-26 10:22:20 发布

bug的生产者

最新推荐文章于 2024-07-26 10:22:20 发布

阅读量1.1w

点赞数 3

分类专栏：项目中的小demo

本文链接：https://blog.csdn.net/qq_43209768/article/details/93620791

版权

项目中的小demo 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

在此要很感谢简书的一位作者，当初写这个弹框的时候被吐槽太丑了，尤其是页面滚动条的体验太差，先放上简书那位作者的地址 898310778 的 https://www.jianshu.com/p/a3eb60b75b92
我使用简书作者的代码后感觉美滋滋，但是过了几天被我们运营发现了bug,说是所有的弹框字体太模糊了（为了方便，我把样式放在了base.css里面），在网上找原因是说transform导致的，因为在使弹框居中的时候，我采用的是这样的居中方式
随便写的一个demo

        div{
            width:300px;
            height:300px;
            background:cadetblue;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%)
        }

后来我改良了一下弹框的居中方式，采用弹性布局方式（就是最后一段代码）*，解决了字体模糊的问题，下面上代码，下面的代码包含了在 header 和 footer 部分添加border边框，右上角的close关闭按钮放大

.el-dialog{
  margin:0!important;
  display:flex;
  flex-direction:column;
   max-height:calc(100% - 30px);
   max-width:calc(100% - 30px);
}
.el-dialog__body{
  transform: translate3d(0,0,0);
  overflow:auto;
}
.el-dialog__header {
  padding: 20px 20px 20px 20px!important;
  border-bottom: 1px solid #f4f4f4;
}
.el-dialog__footer {
  text-align: center!important;
  padding: 12px 20px 12px 20px!important;
  border-top: 1px solid #f4f4f4;
}
.el-dialog__headerbtn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 24px!important;
}
.el-dialog__wrapper {
  display:flex;
  justify-content: center;
  align-items:center;
}

下面是效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190625153818906.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjA5NzY4,size_16,color_FFFFFF,t_70
既然谈到了居中方式，我就把以往搜索到的居中方式在这里集合一下吧哈哈，总共有四种方式，效果图如下
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .ffather{
            background:cornsilk;
        }
        /* .ffather div{
            float:left;
        } */

        /* flex方法 */

        .father {
            background: antiquewhite;
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .son {
            background: red;
        }


        /* css3 transform 方法 */

        .father2 {
            background: salmon;
            width: 200px;
            height: 200px;
            position: relative;
        }

        .father2 .son-center {
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
        }


        /* display:table-cell 方法 */
        .father3{
            background:hotpink;
            width:200px;
            height:200px;
            display:table-cell;
            text-align: center;
            vertical-align: middle;

        }
        .father3 .son-center{
            display:inline-block;
            vertical-align: middle;
        }


        /* display:grid 方法 */
        .father4{
            background:cadetblue;
            width:200px;
            height:200px;
            display:grid;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="ffather">
        <div class="father">
            <div class="son-center">xxxxxxxxxxxxxxxxx</div>
        </div>
        <div class="father2">
            <div class="son-center">xxxxxxxxxxxxxxxxx</div>
        </div>
        <div class="father3">
            <div class="son-center">xxxxxxxxxxxxxxxxx</div>
        </div>
        <div class="father4">
            <div class="son-center">xxxxxxxxxxxxxxxxx</div>
        </div>
    </div>
</body>

</html>

bug的生产者

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
优化elelment ui 的 dialog 样式

在此要很感谢简书的一位作者，当初写这个弹框的时候被吐槽太丑了，尤其是页面滚动条的体验太差，先放上简书那位作者的地址 898310778 的 https://www.jianshu.com/p/a3eb60b75b92我使用简书作者的代码后感觉美滋滋，但是过了几天被我们运营发现了bug,说是所有的弹框字体太模糊了（为了方便，我把样式放在了base.css里面），在网上找原因是说transform导...
复制链接

扫一扫

专栏目录