如何将两个 v-navigation-drawer 并排显示，并且能够将右边的从左边的隐藏起来？

Question

使用 Vuetify，我想显示两个 v-navigation-drawer 并排显示，并且能够通过左侧按钮隐藏右侧按钮。我当前的代码（见下文）将右侧抽屉显示在左侧抽屉上方，但我希望它在左侧抽屉旁边显示右侧抽屉（见下面的屏幕）。

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

我能够想出以下代码：

<template>
  <v-app dark>
    <v-navigation-drawer v-model="leftMenu" app clipped>
      <v-container ma-0 pa-0>
        <v-toolbar flat>
          <span>Some helper toolbar</span>
        </v-toolbar>
      </v-container>

      <v-container pa-1 mt-1>
        <v-layout row wrap>
          <v-list>
            <v-list-tile>
              <v-list-tile-action>
                <span><a @click.stop="toggleRightMenu"><v-icon>android</v-icon> Task Menu</a></span>
              </v-list-tile-action>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-action>
                <span><v-icon>android</v-icon> Menu Element #1</span>
              </v-list-tile-action>
            </v-list-tile>
          </v-list>
        </v-layout>
      </v-container>
    </v-navigation-drawer>

    <v-navigation-drawer v-model="rightMenu" app clipped>
      <v-container>
        <v-layout>
          <v-list>
            <v-list-tile>
              <v-list-tile-action>
                <span><v-icon>android</v-icon> Testing...</span>
              </v-list-tile-action>
            </v-list-tile>
          </v-list>
        </v-layout>
      </v-container>
    </v-navigation-drawer>

    <v-toolbar app clipped-left>
      <v-toolbar-side-icon @click="leftMenu = !leftMenu"></v-toolbar-side-icon>
      <v-toolbar-title class="headline">
        <span>Testing...</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>

    <v-content>
      <router-view/>
    </v-content>

    <v-footer app>
      <span>Footer</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      leftMenu: true,
      rightMenu: false
    }
  },
  methods: {
    toggleRightMenu() {
      this.rightMenu = !this.rightMenu;
    }
  }
}
</script>

目前我有：https://i.ibb.co/txdN0X8/current-drawer.png

我正在寻找类似的东西：https://i.ibb.co/b514yyC/target-drawer.png

Answer 1

您可以尝试使用 2 个导航抽屉来实现。第二个的margin-left应该相当于第一个抽屉

请看这支码笔。希望这有帮助。

https://codepen.io/Jubels/pen/xeazYY?&editable=true&editors=101

<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>

Answer 2

诀窍是让 v-layout 填充高度并包含两个导航抽屉。

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

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

<v-toolbar flat>
  <v-toolbar-side-icon @click="toggleLeftMenu"></v-toolbar-side-icon>
  <v-toolbar-title class="headline">
    <span>Testing...</span>
  </v-toolbar-title>
  <v-spacer></v-spacer>
</v-toolbar>
<v-layout fill-height>
  <v-navigation-drawer
    style="z-index: 2"
    dark
    clipped
    stateless
    v-model="leftMenu"
  >
    <v-container ma-0 pa-0>
      <v-toolbar flat>
        <span>Some helper toolbar</span>
      </v-toolbar>
    </v-container>
    <v-list>
      <v-list-tile>
        <v-list-tile-action>
          <v-icon @click="rightMenu = !rightMenu">android</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>Task Menu</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
      <v-list-tile>
        <v-list-tile-action>
          <v-icon>android</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>Menu Element #1</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
  </v-navigation-drawer>
  <v-navigation-drawer
    dark
    style="z-index: 1"
    v-model="rightMenu"
    class="pb-0"
    stateless
  >
    <v-list>
      <v-list-tile>
        <v-list-tile-action>
          <v-icon>android</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>Testing right nav</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
  </v-navigation-drawer>
</v-layout>

希望对您有所帮助:)

Answer 3

我把它做成了bitbucket设计，一个是固定的（mini-variant），另一个是抽屉 https://codepen.io/admica/pen/PoozMNw?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-navigation-drawer
      
      
       mini-variant
            mini-variant-width="56"
                         app
                         clipped
                         
          
            
    >
      <v-list dense>
        <v-list-item
          v-for="item in items"
          :key="item.text"
          @click=""
        >
          <v-list-item-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>
              {{ item.text }}
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-subheader class="mt-3 grey--text text--darken-1">SUBSCRIPTIONS</v-subheader>
        <v-list>
          <v-list-item
            v-for="item in items2"
            :key="item.text"
            @click=""
          >
            <v-list-item-avatar>
              <img
                :src="`https://randomuser.me/api/portraits/men/${item.picture}.jpg`"
                alt=""
              >
            </v-list-item-avatar>
            <v-list-item-title v-text="item.text"></v-list-item-title>
          </v-list-item>
        </v-list>
        <v-list-item
          class="mt-3"
          @click=""
        >
          <v-list-item-action>
            <v-icon color="grey darken-1">add_circle_outline</v-icon>
          </v-list-item-action>
          <v-list-item-title class="grey--text text--darken-1">Browse Channels</v-list-item-title>
        </v-list-item>
        <v-list-item @click="">
          <v-list-item-action>
            <v-icon color="grey darken-1">settings</v-icon>
          </v-list-item-action>
          <v-list-item-title class="grey--text text--darken-1">Manage Subscriptions</v-list-item-title>
        </v-list-item>
      </v-list>
      
      
     
    </v-navigation-drawer>
     
     

    <v-app-bar
      app
      
      color="red"
      dense
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-icon class="mx-3">fab fa-youtube</v-icon>
      <v-toolbar-title class="mr-5 align-center">
        <span class="title">Youtube</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-layout
        row
        align-center
        style="max-width: 650px"
      >
        <v-text-field
          :append-icon-cb="() => {}"
          placeholder="Search..."
          single-line
          append-icon="search"
          color="white"
          hide-details
        ></v-text-field>
      </v-layout>
    </v-app-bar>

    <v-content>
      
      <v-container fluid fill-height>
        <v-layout
          
          align-center
          style="position:relative"
        >
          <v-navigation-drawer
        v-model="drawer"
        
        v-if="drawer"
        
        
        
        
        
                          
        
        
      >
        <v-list-item>
          <v-list-item-avatar>
            <v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
          </v-list-item-avatar>
  
          <v-list-item-content>
            <v-list-item-title>John Leider</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
  
        <v-divider></v-divider>
  
        <v-list dense>
  
          <v-list-item
            v-for="item in items"
            :key="item.title"
            link
          >
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>
  
            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
          ahmed ali 
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

如何将两个 v-navigation-drawer 并排显示，并且能够将右边的从左边的隐藏起来？

How to display two v-navigation-drawer next to each other and be able to hide the right one from the left one?

vuejs2

vuetify.js

v-navigation-drawer