<el-dialog :key="popupType" title="选择用户" :visible.sync="popupShow" :destroy-on-close="true"> <div> 弹窗内容,这里省略一万行。。。 </div> </el-dialog>F12打开控制台,发现加不加destroy-on-close属性,关闭dialog,这段代码都存在,而不是消失。
网上查了,这是个BUG。那么只能用v-if或者key来实现。
下面是key的使用:
<el-dialog :key="popupType" title="选择用户" :visible.sync="popupShow"> <div> 弹窗内容,这里省略一万行。。。 </div> </el-dialog>下面是v-if的使用:
<el-dialog v-if="popupShow" title="选择用户" :visible.sync="popupShow"> <div> 弹窗内容,这里省略一万行。。。 </div> </el-dialog>v-if每次都会重新渲染,每次打开都不会执行动画效果,key如果这次打开的值和关闭之前的值一样,则不重新渲染,但会执行动画,否则重新渲染,并且不执行动画。这里的动画指的是dialog打开时的动画效果。
没有动画效果不好看。我转念一想,其实并不需要dialog消失,只要保证里面的内容是新的就可以了,于是将v-if换了个地方:
<el-dialog title="选择用户" :visible.sync="popupShow"> <div v-if="popupShow"> 弹窗内容,这里省略一万行。。。 </div> </el-dialog>这样的话,既重新渲染了,又保证了动画会执行