优化element ui中的弹框样式

96
898310778
0.6 2018.03.09 11:32 字数 505

element ui 虽然提高了开发效率,但是坑也不少,比如弹框的体验就不佳:


弹框体验不佳

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

1. 居中弹框

.el-dialog

  position absolute

  top 50%

  left 50%

  margin 0 !important

  transform translate(-50%, -50%)

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


只能往下滚

2. 防止超出视窗

既然超出视窗会有问题,那就给他限制最大大小就行了:

.el-dialog

  max-height calc(100% - 30px)

  max-width calc(100% - 30px)

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


居中及大小优化后

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

3. 实现body内部滚动

为了能够防止内容超出弹框,并且一直看到footer里的按钮,添加以下代码:

.el-dialog

  display flex

  flex-direction column

  >.el-dialog__body

    overflow auto

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


最终效果

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

技术
Web note ad 1