Vuetify：我的导航抽屉位于另一个元素（工具栏）上答案

【问题标题】：Vuetify: My navigation drawer is positioned over another element (toolbar)Vuetify：我的导航抽屉位于另一个元素（工具栏）上
【发布时间】：2021-05-14 06:19:40
【问题描述】：

我想将导航抽屉放在工具栏下方。

我正在努力实现这样的目标：

我正在尝试做类似的事情，但所有尝试都不成功，目前我有以下内容：

我的代码：

<template>
 <nav>
   
    <v-snackbar v-model="snackbar" :timeout="4000" top color="success">
      <span>Awesome! You added a new project.</span>
      <v-btn text flat @click="snackbar = false">Close</v-btn>
    </v-snackbar>

        <v-toolbar app clipped-left >
            <v-toolbar-side-icon></v-toolbar-side-icon>
             <v-app-bar-nav-icon  @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
            <v-toolbar-title class="text-uppercase gr ey--text">
                <span class="font-weight-light">estudos</span>
                <span>vue</span>
            </v-toolbar-title>
            <v-spacer></v-spacer>

            <v-menu offset-y>
      <template v-slot:activator="{ on, attrs }">
        <v-btn text
          color="primary"
          dark
          v-bind="attrs"
          v-on="on"
        >
          <v-icon left>expand_more</v-icon>
          <span>Menu</span>
        </v-btn>
      </template>
        <v-list>
          <v-list-item v-for="link in links" :key="link.text" router :to="link.route">
            <v-list-item-title>{{link.text}}</v-list-item-title>
          </v-list-item>
        </v-list>
    </v-menu>

            
            <v-btn text color="grey">
                <span>Sign Out</span>
                <v-icon right>exit_to_app</v-icon>
            </v-btn>
        </v-toolbar>


    

    <v-navigation-drawer  v-model="drawer" app  class="indigo white--text"> 
             <v-app-bar-nav-icon  @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
             <v-layout column align-center>
              <v-flex class="mt-5">
                <v-avatar size="90">
                  <img src="/avatar-64.png">
                </v-avatar>
                <p class="white-text dubheading mt-1">
                  Estudos Vue
                </p>
              </v-flex>
              <v-flex class="mt-4 mb-3">
                <popup @projectAdded="snackbar=true" />
              </v-flex>
             </v-layout>
       <v-list >
        <v-divider></v-divider>

        <v-list-item 
          v-for="link in links"
          :key="link.text"
          router :to="link.route"
        >
          <v-list-item-action >
            <v-icon class="white--text">{{ link.icon }}</v-icon>
          </v-list-item-action>

          <v-list-item-content class="white--text">
            <v-list-item-title>{{ link.text }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    
     <v-row>
    <v-col
     
  
    >
      <v-img
      
      max-height="76%"
      max-width="100%"
        src="/imgtest.jpg"
        gradient="to top right, rgba(14,12,11,.51), rgba(14,12,11,.71)"
      >
      <v-img-title class="heading white--text">
        Bien saude</v-img-title></v-img>
    </v-col>

  </v-row>
    </nav>
    
</template>

<script>
import Popup from './Popup'
export default {
    components: { Popup },
    data() {
        return {
            drawer:false,
            links:[
                 {icon: 'dashboard', text:'Dashboard', route:'/'},
                 {icon: 'folder', text:'My Projects', route:'/projects'},
                 {icon: 'person', text:'Team', route:'/team'},

            ],
            items: [
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me 2' },
      ],
            snackbar: true
        }
    },
  }
</script>

我尝试添加 Block 并删除该应用，但没有解决问题... 如何将抽屉放在工具栏下？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

Add clipped to v-navigation-drawer props like: 
<v-navigation-drawer
  clipped>
  <!-- ... -->
</v-navigation-drawer>

【讨论】：

【解决方案2】：

我建议先关注vuetify.js' default markup。

然后你应该在<v-navigation-drawer> 元素中使用clipped 属性，就像已经描述的@mamadou-hady-barry。 (<v-navigation-drawer clipped app>)。

第二次将'clipped-left'添加到<v-app-bar> 元素，结果为：<v-app-bar clipped-left app>。您当前使用的 <v-toolbar> 根据其“API”没有clipped-left 属性。

【讨论】：