使用 Vue 创建静态左侧导航栏组件

Question

我需要在应用程序布局的左侧放置一个垂直导航栏，并将内容全部放在右侧。就目前情况而言，我不能这样做。我的导航栏将所有内容向下推。我怎样才能解决这个问题？这就是我的App.vue's模板的样子：<template>    <div id="app">        <v-app>            <navbar/>            <v-main>                <v-container class="main-container">                    <router-view/>                </v-container>            </v-main>        </v-app>    </div></template>对于navbar我正在使用 vuetify 的组件，特别是迷你导航栏 根据示例代码，它当前的样子如下：<template>    <v-navigation-drawer        v-model="drawer"        :mini-variant.sync="mini"        permanent    >        <v-list-item class="px-2">            <v-list-item-avatar>                <v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>            </v-list-item-avatar>            <v-list-item-title>John Leider</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 items"                :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></template><script>import { Component, Prop, Vue } from 'vue-property-decorator';@Component<Navbar>({})export default class Navbar extends Vue {    private value: string = 'home';    private drawer: boolean = true;    private items: Array<Object> = [        { title: 'Home', icon: 'mdi-home-city' },        { title: 'My Account', icon: 'mdi-account' },        { title: 'Users', icon: 'mdi-account-group-outline' }    ]    private mini: boolean = true;}</script>正如上面提到的，这仍然只是将应用程序的所有内容向下推。这是目前的样子：我该怎么做才能使导航栏在左侧但在右侧

Answer 1

将导航栏和主要内容包装在<v-row>：

<template>

  <div id="app">

    <v-app>

      <v-row>

        <navbar/>

        <v-main>

          <v-container class="main-container">

            <router-view/>

          </v-container>

        </v-main>

      </v-row>

    </v-app>

  </div>

</template>

默认情况下，v-app有一个带有flex-direction: columnCSS 的内部包装器，这意味着它的子元素是垂直放置的。通过将这两个子元素包装在 a 中v-row，您可以将它们放置在带有 的包装元素中flex-direction: row。

Answer 2

我猜你误解了这些概念。您正在将 a 包装在组件v-navigation-drawer内navbar。

在Vuetify v-navigation-drawer中，有一个用于构建侧边栏的组件，这就是您的组件处于垂直方向的原因。

编辑1

app您可以使用组件内的选项配置应用程序侧边栏或应用程序导航栏，如下所示：

  <v-navigation-drawer

    app

  >

  ...

  </v-navigation-drawer>

就像官方文档中一样。如果你这样做，该组件将正常工作，并且你的内容将不会被下推。