element标签弹窗_优化element-ui中的弹框样式

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

自带的弹框样式有很多缺点，比如不居中，大小会超出屏幕然后在最右侧出现滚动条，看不到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内部滚动

.el-dialog{

display:flex;

flex-direction:column;

}

.el-dialog >.el-dialog__body{

overflow:auto;

}

通过给el-dialogbody加overflow auto我们实现了body内部滚动，但是光加这一条还不够，因为overflow容器需要外部限制容器的大小才能产生内部滚动，

这里使用了flex的方式把el-dialogbody的大小限制为总大小减去头和尾的大小。最终效果如下：

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