时间戳

首页 > 解决方案 > v-navigation-drawer 占据整行

vue.js - v-navigation-drawer 占据整行

问题描述

我的 v-navigation-drawer 占据了整行，所以内容放在抽屉下面。我试图在网上搜索，但没有找到任何关于它的信息。我对 Vuetify 很陌生。请帮忙。如果您查看屏幕截图，仪表板必须在抽屉旁边，但它在下面。我有两个组件导航栏和抽屉。我在我的 App.vue 中渲染它们。我附上了下面的代码。

在此处输入图像描述

    App.vue
        <template>
    <v-app>

    <navbar/>
    <drawer/>

        <v-content>
            <h1>Dashboard</h1>
        </v-content>
    </v-app>
    </template>

    <script>
    import Drawer from './components/Drawer';
    import Navbar from './components/Navbar';

    export default {
      name: 'App',
      components: {
            Drawer,
            Navbar,
        },

        data: () => ({

        }),
        method:() => ({})

        };
    </script>

    <style>

    </style>

Navbar.vue

    <template>
        <div>
        <nav>
            <v-toolbar class="cyan lighten-1" dark prominent height="65">

                <v-toolbar-title class="text-uppercase gray--text">
                    <span class="font-weight-light">Stock</span>
                    <span>Dashboard</span>
                </v-toolbar-title>

                <v-spacer></v-spacer>
                <v-btn text color="black">
                    <span>Log Out</span>
                    <v-icon right>exit_to_app</v-icon>
                </v-btn>
            </v-toolbar>

         </nav>
            </div>
    </template>

    <script>

        export default {
            data(){
              return {

              }
            }
        }
    </script>

    <style>

    </style>

Drawer.vue

    <template>
        <v-navigation-drawer id="app-drawer" class="cyan lighten-1" dark permanent>

          <v-list>
            <v-list-tile avatar>
              <v-list-tile-avatar color="white">
                <v-img  :src="require('../assets/bull.svg')" height="70" contain  class="cyan darken-5"></v-img>
              </v-list-tile-avatar>
            </v-list-tile>

            <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>

          <template v-slot:append>
            <div class="pa-2">
              <v-btn block>Logout</v-btn>
            </div>
          </template>
        </v-navigation-drawer>
    </template>

    <script>
      export default {
        data () {
          return {
            items: [
              { title: 'Dashboard', icon: 'dashboard' },
              { title: 'Account', icon: 'account_box' },
              { title: 'Admin', icon: 'gavel' },
            ],
          }
        },
      }
    </script>

    <style>

    </style>

标签： vue.jsvuetify.js

解决方案

在 v-navigation-drawer 中使用“app”，如下所示：

<v-navigation-drawer id="app-drawer" class="cyan lighten-1" dark permanent app>

进一步查看https://vuetifyjs.com/en/components/navigation-drawers API 并使用 v-app-bar 而不是 v-toolbar 作为页面的主工具栏。

推荐阅读