<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>
这样的话,既重新渲染了,又保证了动画会执行