转载

优化element-ui中的弹框样式

针对element-ui中的el-dialog的体验进行一些优化,个人感觉优化有体验更好

file

自带的弹框样式有很多缺点,比如不居中,大小会超出屏幕然后在最右侧出现滚动条,看不到footer里的按钮等。这个时候就需要自己写样式覆盖默认样式来优化了。让我们一个一个来解决

1.居中处理

.el-dialog{
  position:absolute;
  top:50;
  left:50%; 
  margin:0 !important;
  transform:translate(-50%, -50%);
}

这是典型的通过transform来居中的方式,但是这种方式有一个问题,就是居中的内容如果超过了视窗,上边超过的部分无法滚动上去查看,只能往下滚:

file

2. 防止超出视窗

.el-dialog{
  max-height:calc(100% - 30px);
  max-width:calc(100% - 30px);
}

于是弹框现在既能居中又可以把最大大小限制在视窗内:

file

但是现在弹框body里的内容超出了弹框。

3. 实现body内部滚动

.el-dialog{
  display:flex;
  flex-direction:column;
}
.el-dialog  >.el-dialog__body{
   overflow:auto;
}

通过给el-dialogbody加overflow auto我们实现了body内部滚动,但是光加这一条还不够,因为overflow容器需要外部限制容器的大小才能产生内部滚动,
这里使用了flex的方式把el-dialogbody的大小限制为总大小减去头和尾的大小。最终效果如下:

file

非常完美,现在这个弹框既能在视窗居中,又能在内容过多时防止弹框大小超出视窗,还能把滚动限制在body内部从而使得头和尾始终可见,再也不用滚上滚下去找各种标题和按钮了!

作者:898310778
链接:https://www.jianshu.com/p/a3eb60b75b92
来源:简书

正文到此结束
Loading...