vue.js - 如何创建带有抽屉导航和可重新调整大小的内容的 Vuetify 容器？

Question

我在创建一个 Vuetify 容器时遇到了麻烦，该容器将包含一个抽屉导航和一个可重新调整大小的容器(卡片、行或任何其他 Vuetify 元素)，如果抽屉打开或关闭时会变大(类似到 Gmail，例如)。
页面顶部还有一个工具栏，它必须始终保持相同的大小，抽屉必须仅位于其下方的容器中。
我尝试了以下方法:

<div id="app">
  <v-app id="inspire" style="background-color: #ccc;">
    <v-main>
      <v-container fluid class="align-start px-12 py-12">
        <v-row class="mx-0">
          <v-toolbar flat class="px-6">
            <div class="text-h5 mx-3 primary--text">Messages</div>
            <v-spacer />
            <v-btn
              small
              depressed
              text
              @click="drawer = !drawer"
            >
              toggle drawer
            </v-btn>
          </v-toolbar>
        </v-row>
      </v-container>
      <v-container fluid class="align-start px-0 d-flex flex-row">
        <v-navigation-drawer
          v-model="drawer"
          class="mr-2"
          dark
          hide-overlay
        >
          Navigation
        </v-navigation-drawer>
        <v-card flat>card</v-card>
      </v-container>
    </v-main>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    drawer: true
  })
})

那有一张很小的卡片，当我打开/关闭抽屉时它仍然完好无损。所以我尝试添加 width="100%"属性到卡。这使得卡片占据了其余的位置，但是当我打开/关闭抽屉时它仍然保持其大小。
请问有什么帮助吗？这是一个 pen这段代码。

Answer 1

一种方法是设置 :width prop 基于 drawer 的值...

<div id="app">
  <v-app id="inspire" style="background-color: #ccc;">
    <v-main>
    <v-container fluid class="align-start px-12 py-12">
      <v-row class="mx-0">
        <v-toolbar flat class="px-6">
          <div class="text-h5 mx-3 primary--text">Messages</div>
          <v-spacer />
          <v-btn
            small
            depressed
            text
            @click="drawer = !drawer"
          >
            toggle drawer
          </v-btn>
        </v-toolbar>
      </v-row>
    </v-container>
    <v-container fluid class="align-start px-0 d-flex flex-row">
      <v-navigation-drawer
        v-model="drawer"
        class="mr-2"
        dark
        hide-overlay
        :width="drawer?256:0"
      >
        Navigation
      </v-navigation-drawer>
      <v-card flat class="grow">card</v-card>
    </v-container>
  </v-main>
  </v-app>
</div>

Demo