打开 v-navigation-drawer 时如何防止 v-main 移位？（Vuetify、Vue.js 2、Nuxt、Typescript）答案

【问题标题】：打开 v-navigation-drawer 时如何防止 v-main 移位？（Vuetify、Vue.js 2、Nuxt、Typescript）
【发布时间】：2022-01-21 10:55:27
【问题描述】：

我正在使用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>

有人有解决这个问题的办法吗？

【问题讨论】：

看起来像 CSS 问题。你在这里用你的开发工具检查过 DOM 吗？
可能是宽度或边距的问题。
@kissu > 我没有添加任何 CSS ......我相信这是来自 Vuetify 的属性。我会在找到解决方案后立即提供更新。谢谢你的评论！ :)
你有minimal reproducible example 或 Github 链接吗？

标签： layout vuejs2 nuxt.js vuetify.js v-navigation-drawer

【解决方案1】：

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

【讨论】：