vue.js - v-card 中的抽屉导航在 Vuetify 中不起作用

Question

我正在尝试将导航面板添加到 v-card 但不知何故，在添加抽屉导航时，v-card 中的所有内容都被向下推出卡片。

 <v-card flat outlined>
   
      <v-navigation-drawer v-model="drawer"
      :mini-variant.sync="mini"
      permanent>
      <v-row>
       <v-btn class="float-right" icon @click.stop="mini = !mini">
                <v-icon color="black">mdi-chevron-left</v-icon>
              </v-btn>
      </v-row>
      <p>
          
        <v-card v-if="!mini">
        TEST
     </v-card></p>
    </v-navigation-drawer>

        <v-row  dense>
          <v-col cols="12">
            <PlotCard
              style="min-height: 350px"
              :value="1837.32"
              :percentage="3.2"
              :loading="isLoading1"
              percentage-label="vs last week"
              action-label="V2"
            ></PlotCard>
          </v-col>
        </v-row>



        <v-row  dense>
          <v-col cols="12">
            <table-card class="h-full" label="Recent Orders" />
          </v-col>
        </v-row>

    </v-card>

我在这里重现了这个问题 https://codesandbox.io/s/vuetify-playground-lxq25?file=/src/components/ExampleComponent.vue:38-55

如您所见，抽屉导航位于 v-card 中，但其他卡片被推到外面。最终，我想在 Vuetify 中使用抽屉导航的 right 属性使其位于右侧，但即使是普通的 ins 也无法正常工作。知道为什么会发生这种情况吗？

编辑:添加 absolute 使抽屉导航显示为叠加层，但我试图使其显示在右侧并将卡片的内容“挤压”到左侧。

Answer 1

vuetify 有一个布局系统。现在你有内容和抽屉导航，抽屉导航不正确，因为它不知道它属于哪里。您必须将您的内容推送到 v-main(vuetify 内容布局组件)，并通过将 app 属性传递给抽屉导航，您可以告诉它布局的一部分，它是侧边栏。更多信息: https://vuetifyjs.com/en/components/application/#default-application-markup .并传递 right 将导航推到右边。演示:https://codesandbox.io/s/vuetify-playground-forked-qjjnp?file=/src/components/ExampleComponent.vue