Vuetify v-dialog 显示时未完全覆盖父页面答案

【问题标题】：Vuetify v-dialog not covering fully the parent page when showedVuetify v-dialog 显示时未完全覆盖父页面
【发布时间】：2021-05-11 14:33:49
【问题描述】：

我有一个v-dialog 来在主页中显示一个表单，其中包含一个v-data-table。当v-dialog 打开时，DOM 父级的内容保存显示在v-dialog 上。我希望v-dialog 打开并隐藏整个主页直到关闭。在第二次打印时，对话框中显示的内容变得清晰。

v-dialog

  <template>
      <div style="background-color: white;">
        <v-dialog scrollable fullscreen v-model="show" style="background-color: white; width: 800px;" persistent>
                <v-tabs fixed-tabs>
        <v-tab>Único</v-tab>
        <v-tab>Vários</v-tab>
            <v-tab-item>
            </v-tab-item>
            <v-tab-item>
                <v-layout style="height: 100%; background: white;"> 
                    <div style="height: 100%; background: green;">
                       <h1 style="width: 20px;" >asdsa</h1>
                       <h1>asd</h1>
                   </div>
                </v-layout>
          </v-tab-item>
    </v-dialog>
 </div>
</template>

主页

对话框

【问题讨论】：

您好，您有复制链接吗？由于这基本上是一个 CSS 问题，如果没有任何开发工具或已知属性，将很难为您提供帮助。即使它只是在某处遗漏了一些height: 100%。
具有许多业务逻辑和特定数据的远属性。但如果原因可能是它，我可以检查所有组件。
您可以模拟数据并使其保持足够基本以使其正常工作，或者是的，基本上使用开发工具检查所有组件。

标签： javascript vue.js vue-component vuetify.js

【解决方案1】：

问题是您将v-tabs 直接放入v-dialog 组件中。 v-tabs 组件根据其中的内容更改其高度。
我建议您将标签包装在 v-card 和 v-card-text 组件中。使用对话框上的fullscreen 道具，卡片将占据整个高度并掩盖其后面的任何东西。使用您的示例代码，它看起来像这样：

<div style="background-color: white;">
  <v-dialog
    scrollable
    fullscreen
    v-model="show"
    style="background-color: white; width: 800px;"
    persistent
  >
    <v-card>
      <v-card-text>
        <v-tabs fixed-tabs>
          <v-tab>Único</v-tab>
          <v-tab>Vários</v-tab>
          <v-tab-item>
          </v-tab-item>
          <v-tab-item>
            <v-layout style="height: 100%; background: white;">
              <div style="height: 100%; background: green;">
                <h1 style="width: 20px;">asdsa</h1>
                <h1>asd</h1>
              </div>
            </v-layout>
          </v-tab-item>
        </v-tabs>
      </v-card-text>
    </v-card>
  </v-dialog>
</div>

【讨论】：