我的导航栏组件占据了整个视区高度,即使它的子元素没有:

NavBar

我不需要这里所有的空白.

V-app内的子元素v-app-bar显示正确,不会占用任何额外空间:

v-app-bar

英雄部分也占据了适当的空间,但你要滚动到屏幕底部才能看到它:

HeroSection

以下是我的App.Vue:

    <template>
  <NavBar />
  <HeroSection />
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import NavBar from "./components/NavBar.vue";
import HeroSection from "./components/HeroSection.vue";

@Options({
  components: {
    NavBar,
    HeroSection,
  },
})
export default class App extends Vue {}
</script>

<style lang="scss"></style>

这是我的NavBar.vue:

<!-- eslint-disable vue/valid-v-on -->
<template>
  <v-app :full-height="false" class="app-bar-container">
    <v-app-bar :elevation="2">
      <!-- eslint-disable-next-line vue/valid-v-on -->
      <v-app-bar-nav-icon @click="drawer = !drawer" id="hamburger-icon">
      </v-app-bar-nav-icon>
      <v-app-bar-title>The Candidate Consultants</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <v-list-item v-for="item in menuItems" :key="item.title" @click="">
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  VAppBar,
  VNavigationDrawer,
  VList,
  VListItem,
  VListItemTitle,
} from "vuetify/components";

export default defineComponent({
  components: {
    VAppBar,
    VNavigationDrawer,
    VList,
    VListItem,
    VListItemTitle,
  },
  setup() {
    const drawer = ref(false);
    const menuItems = [
      { title: "Home" },
      { title: "About" },
      { title: "Individuals" },
      { title: "Corporate" },
      { title: "Blog" },
      { title: "Contact" },
    ];

    return {
      drawer,
      menuItems,
    };
  },
});
</script>

<style scoped lang="scss">
.app-bar-container {
  height: auto;
}
</style>

和我的HeroSection组件:

<template>
  <div class="hero-section"></div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  name: "HeroSection",
})
export default class HeroSection extends Vue {}
</script>
<style lang="scss">
.hero-section {
  background-image: url("../assets/landing_hero.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100%;
}
</style>

正如你所看到的,我试着在v-app中添加:full-height="false",正如文档中所说的,默认情况下全高是正确的:https://vuetifyjs.com/en/api/v-app/

我还try 添加一个.app-bar-tainer类,然后将其设置为自动高度,以try 删除任何可能导致此问题的默认vutify样式.

我的假设是:

  1. 那个v-app-bar一定在v-app里面.

  2. 这种布局在App.vue中是正确的,组件本身是的直接子元素.

请帮助我了解如何解决这个问题,以及如何布局这些组件,使它们只占用适当的空间向前推进.提前谢谢!

推荐答案

是的,v-app-bar必须在v-app之内,因为它取决于提供的主题.

Vutify旨在包含整个应用程序,因此这intended layout个将是:

<v-app>
  <NavBar />
  <v-main>
    <HeroSection />
  </v-main>
</v-app>

如果你不想使用Vutify布局,我认为你最好的 Select 是从应用程序包装中删除min-height:

  .v-application .v-application__wrap{
    min-height: unset;
    
  }

Vue.js相关问答推荐

如何在Vue 3中将动态特性从主零部件同步到子零部件

Vue 3 需要 main.js 中的文件

我如何使用 vuejs 在我的 url 中编码一个令牌

混合使用 React 和 Vue 是个好主意吗?

将函数作为属性传递给 Vue 组件

在 Vue 中启用(控制台)记录路由事件

避免在运行时向 Vue 实例或其根 $data 添加响应式属性

Vuetify v-data-table ,如何在 HTML 中呈现标题文本?

将检测外部点击自定义指令从 Vue 2 迁移到 Vue 3

如何将 axios/axios 拦截器全局附加到 Nuxt?

在 vue.js 中获取当前时间和日期

在 SASS 中使用 Vuetify 类

Select 下拉列表中的复选框后如何清除 v-autocomplete(多个)搜索输入?

如何将事件绑定到 Vuetify 中的树视图 node ?

未在实例上定义,但在渲染期间引用

更改事件上的 Select2 在 Vuejs 中不起作用

使用 axios 和 vue.js 取消先前的请求

如何在 Vuetify DataTable 组件中设置初始每页行数值?

在~/components/AddPlaceModal.vue中找不到导出AddPlaceModal

Vuetify v-data-table 固定标题不起作用