vue/vuetify 模态模式或最佳实践设计答案

【问题标题】：vue/vuetify modal pattern or best practide designvue/vuetify 模态模式或最佳实践设计
【发布时间】：2020-01-21 14:36:10
【问题描述】：

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

示例代码：

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

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

要创建和销毁组件，我相信您必须使用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>

孩子：

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

Example

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

家长：

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

Example

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

【讨论】：

事实证明，重新渲染元素并且不显示以前的状态是正确的，但是如果将它们绑定到数据，则数据将保留并且仍需要重置。
嗨@Michael 我更新了我的答案。我找不到最干净的方法，但这是我最好的解决方案。
Nice hack :) 但是目前 Vuetify 对话框动画是 300 毫秒，而不是 150 毫秒，请参阅 i.stack.imgur.com/p8oAk.png 或 github.com/vuetifyjs/vuetify/blob/…

【解决方案2】：

不确定这是否是一个好习惯，但您可以将 :key="Math.random()" 添加到组件中，并且每次密钥更改时都会重新加载它。它适用于关闭/打开。

<edit-project-dialog :dialog="getDialogStateByKey('edit_project')" :key="Math.random()" />

【讨论】：