问题描述:用过el-dialog的都知道,它自身带的弹出动画,是距离顶部比较近,然后出现的很急促,观感上并不是很好。

解决办法:

如图所示,红框处要写的是你的dialog的custom-class,这个效果我自己写的,虽然简单,但是挺不错,就是缩放,比原本的那个舒服多了,大家可以去试试。vue项目(这里指的是vue 2.*)要修改element-ui的组件样式的话,要去App.vue中修改。

⚠️注意:初始的el-dialog带有默认样式margin-top:15vh; 所以看起来距离顶部较近,如果要靠屏幕中间显示的话,推荐margin-top:30vh !important;或者margin-top:35vh !important;要用!important覆盖掉原本的样式。这两种观感都比原本的dialog的位置要好上不少。

希望可以帮到各位!

Logo

前往低代码交流专区

更多推荐