我的导航栏组件占据了整个视区高度,即使它的子元素没有:
我不需要这里所有的空白.
V-app内的子元素v-app-bar显示正确,不会占用任何额外空间:
英雄部分也占据了适当的空间,但你要滚动到屏幕底部才能看到它:
以下是我的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样式.
我的假设是:
-
那个v-app-bar一定在v-app里面.
-
这种布局在App.vue中是正确的,组件本身是的直接子元素.
请帮助我了解如何解决这个问题,以及如何布局这些组件,使它们只占用适当的空间向前推进.提前谢谢!