如何在 vuetify 中设置要修复的工具栏？

Question

在 vuetify 我使用工具栏

    <v-toolbar dark color="primary">
        <v-toolbar-side-icon @click.stop="drawer.drawer = !drawer.drawer"></v-toolbar-side-icon>
        <v-toolbar-title>{{drawer.title}}</v-toolbar-title>
    </v-toolbar>
    <router-view v-bind:page="pageData"></router-view>

但我想修复它，而不是与 vuerouter 内容重叠。 我怎样才能做到这一点？ 我试过把它fixed但它仍然重叠。

谢谢

Answer 1

由于版本 2.0.0 v-toolbar 不可修复，因此使用 v-app-bar https://vuetifyjs.com/en/components/app-bars

Answer 2

1. 将app属性添加到工具栏
2. 将您的路由器出口内容放在v-content元素中。
3. 最后，确保整个 shebang 都在v-app元素中。

Answer 3

在style标签中使用 css 参数。 参见） https://journal.simondepelchin.be/2019/03/04/how-to-make-a-sticky-tabs-bar-with-vuetify/

<template>
  <v-toolbar class="fixed-bar">
    <!-- ... -->
  </v-toolbar>
</template>


<style scoped>
.fixed-bar {
  position: sticky;
  position: -webkit-sticky; /* for Safari */
  top: 6em;
  z-index: 2;
}
</style>

Answer 4

在路由器视图之外使用 app-bar 使用此示例https://vuetifyjs.com/en/components/application/#application

 <!-- App.vue --> <v-app> <v-navigation-drawer app> <!-- --> </v-navigation-drawer> <v-app-bar app> <!-- --> </v-app-bar> <!-- Sizes your content based upon application components --> <v-content> <!-- Provides the application the proper gutter --> <v-container fluid> <!-- If using vue-router --> <router-view></router-view> </v-container> </v-content> <v-footer app> <!-- --> </v-footer> </v-app>