原因可能是因为在el-dialog关闭时,它的父元素高度突然变小,导致它的位置发生了变化,从而出现了抖动的现象。
解决方法可以尝试以下方法:
-
在el-dialog的父元素中添加一个min-height,并设置为与el-dialog的高度相等,这样在el-dialog关闭时,父元素的高度不会突然变小,从而避免抖动现象。
-
使用transition来平滑过渡,可以使用vue的transition组件,当el-dialog关闭时,添加一个过渡效果,使得其平滑的消失,不会出现抖动现象。例如:
<transition name="el-dialog-fade"> <el-dialog v-if="visible" @close="handleClose"> // dialog content </el-dialog> </transition>
.el-dialog-fade-enter-active, .el-dialog-fade-leave-active { transition: opacity 0.3s; } .el-dialog-fade-enter, .el-dialog-fade-leave-to { opacity: 0; }
这里使用的是opacity来进行过渡效果,当el-dialog关闭时,opacity会从1到0过渡,使得其平滑的隐藏,从而避免抖动现象。