优化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内部从而使得头和尾始终可见，再也不用滚上滚下去找各种标题和按钮了！
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)