如何在 vuetify 中设置要固定的工具栏？答案

【问题标题】：How to set up toolbar to be fixed in vuetify?如何在 vuetify 中设置要固定的工具栏？
【发布时间】：2018-11-08 23:31:11
【问题描述】：

在 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，但它仍然重叠。

谢谢

【问题讨论】：

你能提供你得到的截图吗？
用这个codepen.io/anon/pen/boxqwY修复了它

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

由于版本 2.0.0 v-toolbar 无法修复，请使用 v-app-bar https://vuetifyjs.com/en/components/app-bars

【讨论】：

【解决方案2】：

将app 属性添加到工具栏
将您的路由器插座内容放入v-content 元素中。
最后，确保整个 shebang 在 v-app 元素内。

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

在路由器视图之外使用应用栏使用这个例子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>

【讨论】：