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

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

Answer 3

从路由器视图外部使用应用程序栏使用此示例https://vuetifyjs.com/en/components/application/#application

chcp 65001

Answer 4

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

如何设置Vuetify中固定的工具栏？

4 个答案: