当v导航抽屉打开时，如何防止v-main移位？( Vue.js 2，Nuxt，打字稿)

Question

我正在构建一个在根目录下带有v-app组件的应用程序，使用一个v-navigation-drawer，我想添加一个“聊天”页面，在这里我也想使用v-navigation-drawer。

问题是组件显示不正确。当我打开应用程序的v-navigation-drawer时，它会移动聊天页面的v-main。

开放应用导航

​

​

关闭的应用程序导航，无论菜单是否折叠，我想要什么

​

下面是我的聊天页面的模板：

<template>
  <v-layout>
    <v-navigation-drawer
      permanent
      color="deep-purple accent-6"
      v-model="drawer"
      :mini-variant.sync="mini"
    >
      <v-list-item class="px-2">
        <v-list-item-avatar>
          <v-img
            src="https://media-exp1.licdn.com/dms/image/C4D03AQHYJ44y1nW7Rw/profile-displayphoto-shrink_800_800/0/1634940206364?e=1645660800&v=beta&t=ni_NG94SNNVHDbzpVEtKwftayQzDy1bDtse2FavjDSU"
          ></v-img>
        </v-list-item-avatar>

        <v-list-item-title>Cosmic Darine</v-list-item-title>

        <v-btn icon @click.stop="mini = !mini">
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
      </v-list-item>

      <v-divider></v-divider>

      <v-list dense>
        <v-list-item v-for="item in menuItems" :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>
    <v-main>
      <v-container>
        <v-row> 
          I am a content
        </v-row>
        <v-row>
          <write-bar />
        </v-row>
      </v-container>
    </v-main>
  </v-layout>
</template>

有谁能解决这个问题吗？

Answer 1

我设法找到了解决办法。我把“绝对”作为v导航抽屉的支柱。菜单在内容上方打开(我想这样做，所以没关系)，不再改变内容。但是，如果有人只想在需要时才打开内容，我猜您必须使用@media规则和带有负值的margin来在屏幕宽度低于特定值的情况下向后移动。