问题描述:用过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的位置要好上不少。

希望可以帮到各位!

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐