el-dialog 中使用 el-select,el-checkbox, 选择的时页面闪烁根本问题,操作时闪现

5 篇文章 0 订阅
5 篇文章 0 订阅

如果你对el-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 .el-dialog__body {
        flex: 1;
        overflow: auto;
    }

那么你的页面就会这样
在这里插入图片描述
解决方法不是乱七八糟的这样

.reprint-remark-form .el-form-item__error {
  transition: none!important;
}
.el-icon-caret-right {
  transition: none!important;
}
…………

或是这样(此方法可行,但是模态框模糊)

.el-dialog.visibility-hidden {
            backface-visibility: hidden;
        }

或是增加高度 增加padding的问题(也行,布局不一样了)
这些都无法根本解决你的问题,其实最关键的问题出在这里

.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__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}
    .el-dialog .el-dialog__body {
        flex: 1;
        overflow: auto;
    }

修改完后你会发现之前困扰的问题都没有了

找到问题的根本,才是解决问题的制胜法宝

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值