打开 v-navigation-drawer 时如何防止 v-main 移动？ （Vuetify、Vue.js 2、Nuxt、打字稿）

Question

我正在使用 v-navigation-drawer 在根目录构建一个带有 v-app 组件的应用程序，我想添加一个“聊天”页面，我也想在其中添加使用 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

我设法找到了解决方案。我添加了 'absolute' 作为 v-navigation-drawer 的道具。菜单在内容上方打开（我想要那个，所以没关系）并且不再移动内容。但是，如果有人想在仅在需要时打开内容时移动内容，我想您必须使用 @media 规则和 margin 负值才能在屏幕宽度低于特定值时向后移动.