Vuejs2 如何显示相邻的两个v-navigation-drawer，并能够从左侧隐藏右侧的抽屉？

使用Vuetify，我希望显示两个相邻的

v-navigation-drawer

s，并能够通过左侧的按钮隐藏右侧的抽屉。我的当前代码（见下文）在左抽屉上方显示右抽屉，但我希望它在左抽屉旁边显示右抽屉（见下文屏幕）

我试图在官方文档中找到一些有用的东西，并浏览了一些不同的示例模板，但在我的案例中没有任何帮助

我能够想出以下代码：

某些辅助工具工具栏

我正在寻找类似的东西：
您可以尝试通过拥有两个导航抽屉来实现。
第二个抽屉左边的
边距应与第一个抽屉相等

请看一下这支笔。希望这有帮助



拨动抽屉1
拨动抽屉2
雪佛龙右
约翰·莱德
雪佛龙左
{{item.icon}
{{item.title}
雪佛龙右
约翰·莱德
雪佛龙左
{{item.icon}
{{item.title}
您可以尝试使用两个导航抽屉来实现。
第二个抽屉左边的
边距应与第一个抽屉相等

请看一下这支笔。希望这有帮助



拨动抽屉1
拨动抽屉2
雪佛龙右
约翰·莱德
雪佛龙左
{{item.icon}
{{item.title}
雪佛龙右
约翰·莱德
雪佛龙左
{{item.icon}
{{item.title}
诀窍是要有一个
v型布局
，它可以填充高度并包含两个导航抽屉

您需要确保应用的另一件事是在两个导航抽屉上都有一个
z-index
。否则，当您切换右导航时，它将转到左导航的顶部。当你想切换左导航时，实际上你必须同时切换两个导航

我使用您的数据示例创建了一个


测试。。。
某些辅助工具工具栏
安卓
任务菜单
安卓
菜单元素#1
安卓
测试右导航

希望它有帮助：）
诀窍是要有一个
v型布局，可以填充高度并包含两个导航抽屉

您需要确保应用的另一件事是在两个导航抽屉上都有一个
z-index
。否则，当您切换右导航时，它将转到左导航的顶部。当你想切换左导航时，实际上你必须同时切换两个导航

我使用您的数据示例创建了一个


测试。。。
某些辅助工具工具栏
安卓
任务菜单
安卓
菜单元素#1
安卓
测试右导航

希望有帮助：）
我把它做成了类似bitbucket的设计，一个是固定的（迷你变型），另一个是抽屉



{{item.icon}
{{item.text}
订阅
添加_圆_轮廓
浏览频道
设置
管理订阅
FabFaYouTube
Youtube
<div id="app">
  <v-app id="inspire">
    <v-layout
      wrap
      style="height: 200px;"
    >
      <v-container>
        <v-layout justify-center>
          <v-btn
            color="pink"
            dark
            @click.stop="drawer = !drawer"
          >
            Toggle Drawer 1
          </v-btn>
          <v-btn
            color="pink"
            dark
            @click.stop="drawer2 = !drawer2"
          >
            Toggle Drawer 2
          </v-btn>
        </v-layout>
      </v-container>

      <v-navigation-drawer
        v-model="drawer"
        :mini-variant="mini"
        absolute
        dark
      >
        <v-list class="pa-1">
          <v-list-tile v-if="mini" @click.stop="mini = !mini">
            <v-list-tile-action>
              <v-icon>chevron_right</v-icon>
            </v-list-tile-action>
          </v-list-tile>

          <v-list-tile avatar tag="div">
            <v-list-tile-avatar>
              <img src="https://randomuser.me/api/portraits/men/85.jpg">
            </v-list-tile-avatar>

            <v-list-tile-content>
              <v-list-tile-title>John Leider</v-list-tile-title>
            </v-list-tile-content>

            <v-list-tile-action>
              <v-btn icon @click.stop="mini = !mini">
                <v-icon>chevron_left</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>

        <v-list class="pt-0" dense>
          <v-divider light></v-divider>

          <v-list-tile
            v-for="item in items"
            :key="item.title"
            @click=""
          >
            <v-list-tile-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-navigation-drawer>
      <v-navigation-drawer :style="`margin-left: ${drawer ? '300px' :  '0'}`"
        v-model="drawer2"
        :mini-variant="mini"
        absolute
        dark
      >
        <v-list class="pa-1">
          <v-list-tile v-if="mini" @click.stop="mini = !mini">
            <v-list-tile-action>
              <v-icon>chevron_right</v-icon>
            </v-list-tile-action>
          </v-list-tile>

          <v-list-tile avatar tag="div">
            <v-list-tile-avatar>
              <img src="https://randomuser.me/api/portraits/men/85.jpg">
            </v-list-tile-avatar>

            <v-list-tile-content>
              <v-list-tile-title>John Leider</v-list-tile-title>
            </v-list-tile-content>

            <v-list-tile-action>
              <v-btn icon @click.stop="mini = !mini">
                <v-icon>chevron_left</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>

        <v-list class="pt-0" dense>
          <v-divider light></v-divider>

          <v-list-tile
            v-for="item in items"
            :key="item.title"
            @click=""
          >
            <v-list-tile-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-navigation-drawer>
    </v-layout>
  </v-app>
</div>