优化elementui中的弹框样式
element ui 虽然提⾼了开发效率，但是坑也不少，⽐如弹框的体验就不佳：
弹框体验不佳
⾃带的弹框样式有很多缺点，⽐如不居中，⼤⼩会超出屏幕然后在最右侧出现滚动条，看不到footer⾥的按钮等。这个时候就需要⾃⼰写样式覆盖默认样式来优化了。让我们⼀个⼀个来解决
1. 居中弹框
.el-dialog
position absolute
top 50%
left 50%
margin 0 !important
transform translate(-50%, -50%)
这是典型的通过transform来居中的⽅式，但是这种⽅式有⼀个问题，就是居中的内容如果超过了视窗，上边超过的部分⽆法滚动上去查看，只能往下滚：
只能往下滚2. 防⽌超出视窗
element表格横向滚动条既然超出视窗会有问题，那就给他限制最⼤⼤⼩就⾏了：
.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内部从⽽使得头和尾始终可见，再也不⽤滚上滚下去各种标题和按钮了！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。