优化element ui中的弹框样式

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内部从而使得头和尾始终可见，再也不用滚上滚下去找各种标题和按钮了！