vue/vuetify 模态模式或最佳实践设计 [英] vue/vuetify modal pattern or best practide design

问题描述

在我正在开发的应用程序中，我们有很多模态，每个模态都包含少量数据，通常是 2-3 个字段，有时是复选框、列表等.
问题是当组件关闭时如何从内部重置/销毁组件.造成这种情况的原因有两个:
1) 不必清除每个模态上的单个数据字段.
2)当第二次打开模态时，道具上的观察者将再次被触发(一些模态是编辑"的，因此是预先填充的，我宁愿不管理这些数据).
现在，如果模态从外部关闭，那么我可以更改组件上的键，这将解决问题，因为模态是从组件内部关闭的，那么我不知道我是否可以这样做(会很棒).你如何设置你的模态?什么是干净的架构?

In the app I am working on we have many modals, each modal contains a small amount of data, generally 2-3 fields, sometimes checkboxes, lists etc.
The question is how do reset/destroy the component from the inside when it is closed. The reason for this would be twofold:
1) Not to have to clear individual data fields on each modal.
2) Watchers on props would be triggered again when the modal is opened a second time (some of the modals are "edit" and therefore are prepopulated, I would rather not manage this data).
Now if the modal was closed from the outside then I could change the key on the component and this would solve the issue, since the modal is closed from inside a component, then I do not know if I can do this (would be great). How do you setup your modals? What would be clean architecture?

示例代码:

<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 键之外单击的情况.

Now in some cases I actually have many fields and I need them to clear each time the modal is closed. This needs to cover cases where "Cancel" is clicked, as well as where the user clicks outside the modal or the ESC key which I support.

推荐答案

要创建和销毁组件，我相信您必须使用 v-if.但不幸的是，由于过渡，v-dialog 并不容易.

To create and destroy the component I believe you have to use v-if. But unfortunately it not easy with v-dialog due to the transition.

第一个解决方案，在父级而不是子级中使用v-dialog:

The first solution, use v-dialog inside parent instead of child:

家长:

<v-btn @click.stop="dialog = true">Open Dialog</v-btn>

<v-dialog v-model="dialog">
  <!-- transition component help to keep leave transition -->
  <transition :duration="150">
    <Child v-if="dialog"/>
  </transition>
</v-dialog>

孩子:

<v-btn @click="$parent.dialog = false">Disagree</v-btn>

示例

第二种方案，在child中使用v-dialog

The second solution, use v-dialog inside child

家长:

<v-btn @click.stop="dialog = true">Open Dialog</v-btn>

<Child v-if="dialog" @close="dialog = false"/>

孩子:

<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')
      }, 150)
    }
  }
}

示例

我认为从不同的角度来看这两种解决方案都是正确的.但我更喜欢第一个解决方案，因为它占用的空间更少.

I think both solutions are correct in different point of view. But I prefer the first solution since it has less footprint.

这篇关于vue/vuetify 模态模式或最佳实践设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！