使用 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，特别是 mini navbar 根据示例代码，这是它目前的样子：

<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 lang="ts">
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>

正如上面提到的，这仍然只是将应用程序的所有内容向下推。这是它目前的样子：

我该怎么做才能让我的导航栏在左边但在右边

编辑：为了澄清起见，我确实希望导航栏是垂直的，但我只是不希望它向下推所有内容。基本上我希望我的应用程序有一个side navigation

Answer 1

将导航栏和 main 包裹在 <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: column CSS 的内部包装器，这意味着它的子元素是垂直放置的。通过将这 2 个子元素包装在 v-row 中，您可以将它们放置在带有 flex-direction: row 的包装元素中。

Answer 2

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

在 Vuetify 中，v-navigation-drawer 是用于构建 Sidebars 的组件，这就是为什么您的组件是垂直的。

您应该尝试改用v-app-bar。这是文档：https://vuetifyjs.com/en/components/app-bars/

编辑 1

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

  <v-navigation-drawer
    app
  >
  ...
  </v-navigation-drawer>

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