在我正在开发的应用程序中,我们有很多模态,每个模态包含少量数据,通常是 2-3 个字段,有时是复选框、列表等。
问题是当组件关闭时如何从内部重置/销毁组件。造成这种情况的原因有两个:
1) 不必清除每个模式上的各个数据字段。
2)当第二次打开模态时, Prop 上的观察者将再次触发(某些模态是“编辑”的,因此是预先填充的,我宁愿不管理这些数据)。
现在,如果模态从外部关闭,那么我可以更改组件上的键,这将解决问题,因为模态是从组件内部关闭的,那么我不知道是否可以做到这一点(会很棒) 。
你如何设置你的模态?什么是干净的架构?
示例代码:
<parentComp>
<customChildModal ref="$customChildModal"></customChildModal>
</parentComp>
// customChildModal
<v-dialog v-model="dialogState">
<v-text-field v-model="name">
...
</v-text-field>
<v-btn @click="dialogState = false">Cancel</v-btn>
<v-btn @click="saveSomething">Save</v-btn>
...
data(){
return {
dialogState: false,
name: ''
...
现在,在某些情况下,我实际上有很多字段,每次关闭模式时我都需要清除它们。这需要涵盖单击“取消”的情况,以及用户在我支持的模式或 ESC 键之外单击的情况。
最佳答案
要创建和销毁组件,我相信您必须使用v-if
。但不幸的是,由于过渡,v-dialog
的使用并不容易。
第一个解决方案,在父级而不是子级中使用v-dialog
:
父级:
<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>
第二种解决方案,在child中使用v-dialog
父级:
<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)
}
}
}
我认为这两种解决方案从不同的 Angular 来看都是正确的。但我更喜欢第一个解决方案,因为它占用的空间较小。
关于javascript - vue/vuetify 模态模式或最佳实践设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59843415/