Question

我的工具栏和sidenav位于我的容器顶部，阻碍了内容视图。

我可以轻松地在容器上放一个上边距来纠正工具栏上的问题，但是因为当屏幕宽度减小时sidenav缩回，尝试对sidenav进行相同操作会导致显示问题。

App.vue

<template>
  <v-app>
    <Navs/>
    <div class="div" style="margin-top: 64px;">
      <router-view/>  
    </div>
    <Footer/>
  </v-app>
</template>

Navs.vue

<template>

<div class="content">
<!-- Sidenav draw -->
<v-navigation-drawer 
    class = "NavDark" 
    persistent 
    :mini-variant="true"
    :clipped="clipped" 
    v-model="drawer"
    enable-resize-watcher
    mobile-break-point="1000"
    app
>

    <v-layout align-center justify-space-between fill-height column>

        <v-layout align-center justify-start fill-height column>
            <!-- Logo square -->
            <div style = "height: 64px; width: 82px; position: absolute; z-index: -1;">
                <Granim/>
            </div>

            <div style = "height: 64px;">
                <v-container pa-0 bg fill-height grid-list-md text-xs-center>
                    <v-layout row wrap align-center>
                        <v-flex pa-0>
                            <v-list-tile-avatar>
                                <img src="@/assets/layout/sidebar/whitelogo.png" class="logo">
                            </v-list-tile-avatar>
                        </v-flex>
                    </v-layout>
                </v-container>
            </div>

            <!-- </v-toolbar> -->

            <!-- Items at the top of the sidenav -->
            <v-list dark>
                <v-list-tile
                v-for="item in topMenuItems"
                :key="item.title"
                :to="item.path"
                style="padding: 10px, 0px, 10px , 0px"
                >
                    <v-tooltip right>
                        <v-list-tile-action
                        slot="activator"
                        >            
                            <v-icon>{{ item.icon }}</v-icon>
                        </v-list-tile-action>
                        <v-list-tile-content>{{ item.title }}</v-list-tile-content>
                    </v-tooltip>
                </v-list-tile>
            </v-list>

        </v-layout>

        <v-list dark>
        <!-- </v-layout> -->
            <v-layout align-center justify-end column fill-height> 

                <v-menu
                    v-model="menu"
                    :close-on-content-click="false"
                    :nudge-width="200"
                    offset-x
                >
                    <v-btn
                    slot="activator"
                    dark
                    icon
                    >
                    <v-icon>person</v-icon>
                    </v-btn>

                    <v-card>
                    <v-list>
                        <v-list-tile>

                        <v-list-tile-content>
                            <v-list-tile-title>{{ user.email }}</v-list-tile-title>
                            <v-list-tile-sub-title>{{ user.token }}</v-list-tile-sub-title>
                        </v-list-tile-content>

                        </v-list-tile>
                    </v-list>

                    <v-divider></v-divider>

                    <v-card-actions>
                        <v-spacer></v-spacer>

                        <v-btn flat @click="menu = false">Cancel</v-btn>
                        <v-btn color="primary" flat @click="menu = false">Settings</v-btn>
                        <v-btn color="error" flat @click="userSignOut">Logout</v-btn>

                    </v-card-actions>
                    </v-card>
                </v-menu>

            </v-layout>
        </v-list>
    </v-layout>
</v-navigation-drawer>

<v-toolbar  
    app
    class ="elevation-0"
    color="#eee"
    :clipped-left="clipped"
    >

    <v-toolbar-side-icon
    class="hidden-md-and-up"
    @click="drawer = !drawer">
    </v-toolbar-side-icon>

    <v-toolbar-title v-text="title" class="toolbar-text"></v-toolbar-title>

    <v-spacer></v-spacer>

    <v-toolbar-title v-if="user" v-text="user.email" class="toolbar-text"></v-toolbar-title>


</v-toolbar>
</div>

</template>

<style>
.NavDark {
    height: 100vh; 
    box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
}
</style>

理想情况下，我正在尝试寻找一种解决方案，其中<router-view/>不会与<Navs/>重叠，并填充屏幕上工具栏和sidenav不会占用的所有可用空间。

Answer 1

使用v-content

解决

<template>
  <v-app>
      <Navs/>
      <v-content class="light">
        <router-view/>
      </v-content>
      <Footer/>
  </v-app>
</template>

坐在导航后面的集装箱

1 个答案: