要创建和销毁组件,我相信您必须使用v-if
。但不幸的是这并不容易v-dialog
由于过渡。
第一个解决方案,使用v-dialog
在父级而不是子级中:
Parent:
<v-btn @click.stop="dialog = true">Open Dialog</v-btn>
<v-dialog v-model="dialog">
<!-- transition component help to keep leave transition -->
<transition :duration="300">
<Child v-if="dialog"/>
</transition>
</v-dialog>
Child:
<v-btn @click="$parent.dialog = false">Disagree</v-btn>
Example https://jsfiddle.net/3eypgcjw/
第二种解决方案,使用v-dialog
内心的孩子
Parent:
<v-btn @click.stop="dialog = true">Open Dialog</v-btn>
<Child v-if="dialog" @close="dialog = false"/>
Child:
<v-dialog v-model="dialog" @click:outside='close'>
<v-btn @click="close">Disagree</v-btn>
</v-dialog>
{
mounted() {
this.dialog = true
},
methods: {
close() {
this.dialog = false
setTimeout(() => { // again this help to keep transition
this.$emit('close')
}, 300)
}
}
}
Example https://jsfiddle.net/yeq9ovxk/
我认为这两种解决方案从不同的角度来看都是正确的。但我更喜欢第一个解决方案,因为它占用的空间较小。