我試圖用Vuetify2實(shí)現(xiàn)一個(gè)側(cè)邊欄擴(kuò)展菜單，如文檔中所示，但是經(jīng)過幾個(gè)小時(shí)的努力，嘗試了文檔選項(xiàng)中不同的建議，還是找不到一種方法讓擴(kuò)展菜單溢出并出現(xiàn)在所有其他項(xiàng)目之上。

當(dāng)前的行為把所有東西都推開，導(dǎo)致它翻到下一行，為了不弄亂頁面元素，邊欄的擴(kuò)展肯定是更好的。

下面是抽屜組件的模板:

<v-card>
      <v-navigation-drawer
        v-model="drawer"
        :mini-variant.sync="mini"
        permanent
      >
        <v-list>
          <v-list-item class="px-2">
            <v-list-item-avatar>
              <v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
            </v-list-item-avatar>
            <v-spacer></v-spacer>
            <v-btn
              icon
              @click.stop="mini = !mini"
            >
              <v-icon>mdi-chevron-left</v-icon>
            </v-btn>
          </v-list-item>

          <v-list-item>
            <v-list-item-content>
              <v-list-item-title class="text-h6">
                {{ $auth.user?.name }}
              </v-list-item-title>
              <v-list-item-subtitle>{{ $auth.user.email }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>

和父組件模板:

<v-app>
     <div class="row">
       <navbar @change-tab="changeTab" :items="items">
       </navbar>
       <div class="container">
         <other custom components>
       </div>
     </div>
    <v-app>

我已經(jīng)嘗試覆蓋z索引和溢出(y/x/和兩者)。導(dǎo)航抽屜。我也用同樣的方法做了包裝v-card的實(shí)驗(yàn)，但還是沒有結(jié)果。

看起來像是你試圖通過用& quotrow & quot班級(jí)。但對(duì)于像導(dǎo)航抽屜這樣的頂級(jí)應(yīng)用組件，Vuetify會(huì)幫你做到這一點(diǎn)。所以應(yīng)該只是:

<v-app>
  <navbar @change-tab="changeTab" :items="items"></navbar>
  <v-main>
    ...
  </v-main>
<v-app>

v2中的文檔非常少更多后續(xù)& quot)，但是看一下v3的文檔可能會(huì)有所幫助——雖然它的行為不一樣，但是它可能會(huì)讓您知道它是如何工作的。

非常感謝@Moritz Ringler的詳細(xì)回答和有用的提示！我還沒有深入研究v2-v3行為和實(shí)驗(yàn)的細(xì)節(jié)。 然而，與此同時(shí)，我設(shè)法找到了一個(gè)解決辦法，這可能會(huì)幫助那些試圖手動(dòng)控制安排的人。 以下是我所遺漏的: 我完全忘記了z-index使用position:absolute，所以我設(shè)計(jì)了這個(gè)css類:

.front {
  position: absolute;
  z-index: 9 !important;
  overflow: visible !important;
}

最后把導(dǎo)航條組件包在里面:

<div class="front">
         <profile-nav @change-tab="changeTab" :items="items">
         </profile-nav>
       </div>