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 属性在右侧插入，但即使是正常的一个插件也无法正常工作。知道为什么会发生这种情况吗？

编辑：添加绝对使导航抽屉显示为覆盖，但我试图让它出现在右侧并将卡片的内容“挤压”到左侧。

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