Question

我想知道我该怎么做。

在某些组件中，它似乎位于顶部，但是在其他组件（例如Leaflet（地图）组件）之后，它们与我的SideDrawer重叠，因此我无法正确使用它。

如何设置导航抽屉始终位于顶部，且z-index值高于其他组件？

Answer 1

打开您的根组件App.vue
确保您的样式标签不具有scoped属性，以便CSS可以全局应用
添加以下CSS

.v-navigation-drawer {
z-index: 999999 !important;
}

Answer 2

我对v-calendar组件有一个非常相似的问题。导航抽屉可用于除v-calendar之外的其他页面。

事实证明，我没有以正确的方式使用元素v-app，v-content和v-container。您可以分享您的App.vue内容以便我们检查吗？

我相信您应该寻找这种结构，而不是研究 css技巧（不是我们不能，但是在使用组件时，我们不应该改变这么深）

例如，在我的应用程序中，它现在可以使用，并且我的结构如下：

<template>
  <v-app>
    <v-navigation-drawer ... />
    <v-content>
      <v-container>
        <router-view />
      </v-container>
    </v-content>
  </v-app>
</template>

带有日历的view或多或少像：

<template>
  <v-row>
    <v-col>
      <v-sheet>
        <v-calendar />
      </v-sheet>
    </v-col>
  </v-row>
</template>

希望对您有帮助！

如何始终将Vuetify导航抽屉设置在所有其他应用程序组件的顶部

2 个答案: