Vuetify 在 Nuxt.js 项目中表现不佳

Question

我遇到了一些奇怪的问题。 Vuetify 在我的 nuxt.js 项目中的功能有限。

首先这是我的默认布局：

  <div>
    <NavBar />
    <Nuxt />
  </div>
</template>

并且 NavBar 组件覆盖了页面。 但是，如果我从 <v-app-bar app flat> 中删除 app 属性，问题就会消失，但 NavBar 将不会始终位于页面顶部。 详情见截图： 默认视图：

在lorem 上使用margin-top: 100px; 查看

NavBar组件的代码：

<template>
  <nav>
    <v-app-bar app flat>
      <v-app-bar-nav-icon
        x-large
        class="grey--text"
        @click="drawer = !drawer"
      />
      <v-spacer />
      <v-toolbar-title>
        <a href="/">LOGO</a>
      </v-toolbar-title>
      <v-spacer />
      <v-menu offset-y>
        <template #activator="{ on, attrs }">
          <v-btn text v-bind="attrs" v-on="on">
            <!-- <v-icon>expand_more</v-icon> -->
            Dropdown menu
          </v-btn>
        </template>
        <v-list>
          <v-list-item v-for="contact in contacts" :key="contact.i">
            <v-list-item-action>
              <a :href="contact.link">
                <v-icon>
                  {{ contact.icon }}
                </v-icon>
              </a>
            </v-list-item-action>
            <v-list-item-content>
              <a :href="contact.link">
                <v-list-item-title>
                  {{ contact.name }}
                </v-list-item-title></a
              >
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" bottom temporary app>
      <v-list>
        <v-list-item
          v-for="link in links"
          :key="link.i"
          router
          :to="link.route"
          @click="refresh"
        >
          <v-list-item-action>
            <v-icon>{{ link.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>
              <span> {{ link.name }} </span>
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
    }
  },
  computed: {
    links() {
      return this.$store.state.routes
    },
    contacts() {
      return this.$store.state.contacts
    },
  },
  methods: {
    refresh() {
      if (this.drawer) {
        this.drawer = !this.drawer
      }
    },
  },
}
</script>

<style></style>

如您所见，NavBar 覆盖了部分内容。

另一个问题是class="mt-5 pt-5" 或任何其他关于margin 或padding 的类都不起作用。 class="d-flex" 也不行。

正如您在屏幕截图中看到的那样，有一个 class="ml-5 pl-5 d-flex" 但没有剩余边距，没有剩余填充，并且容器不是弹性的。

然而

:class="{
      'tiny': $vuetify.breakpoint.smAndDown,
      'large': $vuetify.breakpoint.mdAndUp,
    }"

和

<style>
.tiny {
  font-size: 1rem;
  color: red;
}
.large {
  font-size: 2rem;
  color: green;
}
</style>

确实有效。

我真的很困惑nuxt.js中的vuetify

Answer 1

擦除和创建一个新的 Nuxt.js 项目以某种方式帮助解决了 vuetify 的问题。

关于保证金： 通过将 NavBar（代码本身）包含到 default.vue 布局中并在其中嵌套组件来解决该问题。 出于某种原因，如果我将它以这种方式嵌套在 layouts/default.vue 中，它不起作用：

<NavBar />
<Nuxt />
<Footer />

所以layouts/default.vue 看起来像这样，它确实有效只是很好：

<template>
  <v-app dark>
    <v-navigation-drawer v-model="drawer" bottom :fixed="fixed" app>
      <v-list>
        <v-list-item
          v-for="route in routes"
          :key="route.i"
          :to="route.to"
          router
          exact
          @click="refresh"
        >
          <v-list-item-action>
            <v-icon>{{ route.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title v-text="route.title" />
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar :fixed="fixed" app flat>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-spacer />
      <NuxtLink to="/">LOGO</NuxtLink>
      <v-spacer />
      <span> <a href="tel:+34XX-XXX-XX-XX">+34XX-XXX-XX-XX</a> </span>
      <DropdownWithContacts />
    </v-app-bar>
    <v-main>
      <Nuxt /> <!-- the nuxt view -->
    </v-main>
    <v-spacer></v-spacer>
    <Footer />
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      fixed: true,
    }
  },
  computed: {
    routes() {
      return this.$store.state.menu.routes
    },
  },
  methods: {
    refresh() {
      if (this.drawer) {
        this.drawer = !this.drawer
      }
    },
  },
}
</script>

<style>
/*a normal, unvisited link*/
a:link {
  color: green;
}
/*a link the user has visited*/
a:visited {
  color: purple;
}
/*a link when the user mouses over it*/
a:hover {
  color: yellow;
}
/*a link the moment it is clicked*/
a:active {
  color: brown;
}
/* removed underline */
a {
  text-decoration: none;
}
</style>

我真的觉得这很奇怪。但我想这就是它的工作方式。